Pass parameter in React Url to get relative data - node.js

Question

I created a express api where when we pass parameter to url say localhost:8000/data?music=rock it gives me data associated with it and if i pass say localhost:8000/data?music=rap and gives me data associated with it....P.S. there are many genre of music classical and so on and data associated with it.
Express api:: connected to mongoose where I scraped a data and stored in mongodb from where it feteches the data
app.get('/data'.(res,req)=>{
count music = req.query.music
collection.find({"music":music},(err,result)=>{
if(err):
return res.status(500).send(err);
}
else{
console.log(docs);
res.send(docs);
}
});
});
React JS::::
import React from "react";
class App extends React.Component {
constructor(props) {
super(props);
this.state = {apiResponse:"",genre:""};
}
async callAPI(e) {
console.log(e.target.value);
const url = `http://localhost:8000/data?music=${e.target.value}`;
const response = await fetch(url);
console.log(response);
const textResponse = response.text();
console.log(textResponse);
this.setState({apiResponse:textResponse});
}
render() {
const {apiResponse} = this.state;
console.log(apiResponse);
return (
<>
<select name="continent" id="continent" onClick={e=>this.callAPI(e)}>
<option value=" ">--Please choose an option--</option>
<option value="Europe">Europe</option>
<option value="North America">North America</option>
</select>
{apiResponse && <h1>{apiResponse.title}</h1>}
</>
);
}
}
export default App;
Now i connected my express api with react but as you can see i have provided static path as
fetch("http://localhost:8000/data?music=Rock")
to get the data associated with rock music.
But I want react to fetch different genre of music dynamically from API without using a static path to fetch data. like react port:: localhost:3000/music=rock and it gives me data of rock music or classical and it gives me data of that.
Can anyone from community guide me on what method can be used or any article? Will be really appreciated. Cheers!!

Answer 1

You can use the select element to trigger an onChange event to fetch data from the user. Here, I replaced the url with template literals. After the fetch is complete and apiResponse is set, you can then map the data in the return block.
Here is a working sandbox.
import React from "react";
class App extends React.Component {
constructor(props) {
super(props);
this.state = { apiResponse: "", genre: "" };
}
async callAPI(e) {
console.log(e.target.value);
const url = `http://localhost:8000/data?music=${e.target.value}`;
const response = await fetch(url);
console.log(response);
const textResponse = response.text();
console.log(textResponse);
this.setState({ apiResponse: textResponse });
}
render() {
return (
<>
<select name="genre" id="genre" onChange={e => this.callAPI(e)}>
<option value="">--Please choose an option--</option>
<option value="Rap">Rap</option>
<option value="Rock">Rock</option>
</select>
</>
);
}
}
export default App;

Answer 2

You can use axis for the request and set the params, in this case, the music
axios.get('http://localhost:8000/data', {
params: {
music: 'rap'
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
})
.finally(function () {
// always executed
});
You can read more about axis here

Answer 3

You can add a controlled input field for music and use this.state.music in the fetch URL
https://reactjs.org/docs/forms.html#controlled-components