I'm using reactjs in front end and nodejs as backend. I'm calling my backend (localhost:3001/api/tunes) through this code :
componentDidMount(){
fetch("/api/itunes")
.then((results)=>{
this.setState({queryResult:results});
})
}
This code is supposed to return a single string value which I'm assigning to local state variable queryResult. I can't understand why the code gives error - objects are not valid react child.
My render function :
render(){
return(
<div>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search"
value={this.state.queryValue} onChange={this.handleQueryChange} />
<button class="btn btn-outline-success my-2 my-sm-0" type="submit"
onClick={this.submitQuery}></button>
</form>
<div>{this.state.queryResult}</div>
</div>
);
}
this is what I'm getting from my server:
router.get('/api/itunes',(req,res,next)=>{
request('https://itunes.apple.com/search?term=jack+johnson',
function (error, response, body) {
if (!error && response.statusCode == 200) {
// console.log(body) // Print the google web page.
var result =JSON.parse(body);
res.send(result.results[0].artistName);
}
});
});
<div>{this.state.queryResult}</div>
and hence you get this error, you need to map over your response and render it