0

I have a URL contains a few parameters, for example, myURL?pageNo={pNo}&search1={campus}&search2={s2}. search and search2 are two dropdown boxes. How to update the search1 and search2 values in handleChange()?

import React, { Component } from 'react';
import { render } from 'react-dom';
import axios from 'axios';
//import Course from './components/Course.js';
const API_URL='myURL';
class App extends Component {
state = {
query: '',
campus:'',
results: [],
TotalRecordCount:0,
currentPage:1
}
 //URL with parameters
getInfo = () => {
  let query='pageNo=${currentPage}&campus=${campus}';
  axios.get(`${API_URL}?${this.state.query}`)
    .then(response => {
     // console.log(response);
      this.setState({
        results: response.data,

      });
    });
}
//event handler
handleChange(event){
 this.setState({
  campus: event.target.value}, <!--?? how to replace campus value in query?
 () => {    
        this.getInfo()
  }
)
}

//render

render() {
    const results=this.state.results;
    return (
    <div className="App">
     <form>
     <div className="campusFilter">
       <select name="campus" onChange={this.handleChange.bind(this)}>
         <option value="">Select a Campus</option>

        <option>Campus A</option>
        <option>Campus B</option>
       </select>
       </div>
    <p>{this.state.query}</p>
    <!--display results here-->
  </form>
  </div>
  )
 }
 }
export default App;

Thanks.

Alejandro
  • 5,834
  • 1
  • 19
  • 36
user788448
  • 779
  • 1
  • 14
  • 36

0 Answers0