How to pass parameter in api url based on selected option? - reactjs

Question

I would like to fetch data based on selected job id.
Job id should be selected from drop down list.
Once the job id will be selected, api url should be adjusted with the property job id.
I added the select option and fetch statement. However I cannot pass the parameter in the url.
const jsonify = res => res.json();
var chart_request = new Request(
`https://xxxx.com/prod/job-id?job_id_number=${this.state.selectVal}`,
{
method: 'GET',
headers: new Headers({
'Content-Type': 'application/json'
})
}
);
const dataFetch = fetch(chart_request).then(jsonify);
export default class ZYZ extends Component {
constructor(props) {
super(props);
this.state = {
selectVal : "650"
}
}
setSelectValue = (event) => {
this.setState({
selectVal: event.target.value
});
}
render() {
return
<React.Fragment>
<select value={this.state.selectVal} onChange={this.setSelectValue}>
<option value = "650">650</option>
<option value = "1052">1052</option>
</select>
<p>{this.state.selectVal}</p>
</React.Fragment>
}
}

Answer 1

You can't use your state outside your class.
But if you insist, you can use componentDidMount & componentDidUpdate lifecycle methods on initial load and every select respectively, and pass the id as an argument to fetchData & chart_request as follow:
componentDidMount() {
// calling fetch, resolving the promise, and storing the data in state
fetchData(this.state.selectVal).then(data => this.setState({ data }));
}
componentDidUpdate() {
// same as above
fetchData(this.state.selectVal).then(data => this.setState({ data }));
}
The modifications for chart_request & fetchData:
const chart_request = id =>
fetch(
`https://xxxx.com/prod/job-id?job_id_number=${id}`
)
.then(response => response.json()) // instead of "jsonify"
.then(data => JSON.stringify(data))
.catch(error => error);
const fetchData = id => chart_request(id);
I have modified the SandBox so you can test your output.