Reactjs error, objects are not valid as react child?

Question

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);
        }
    });
});

You can't just render the response from the API. You'll have to map it to individual elements. — Andrew Li
– Andrew Li, Commented Dec 16, 2017 at 18:06
You are trying to render <div>{this.state.queryResult}</div> and hence you get this error, you need to map over your response and render it — Shubham Khatri
– Shubham Khatri, Commented Dec 16, 2017 at 18:08
even though the result is string, then also i can't just assign to local state variable ? — ashukid
– ashukid, Commented Dec 16, 2017 at 18:08
@ASHUTOSHCHANDRA It's not a string, judging by the error message. — Andrew Li
– Andrew Li, Commented Dec 16, 2017 at 18:08

kumaran ragunathan · Accepted Answer · 2017-12-16 18:11:06Z

0

You are trying to render whole object which is this.state.queryResult .

React cannot render objects.You must convert this to String or have to extract each value from the object.

You can easily check this using {console.log(this.state.queryResult)}

answered Dec 16, 2017 at 18:11

kumaran ragunathan

4472 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ashukid Over a year ago

can you suggest how to do it properly, returned value from the api is a string.

kumaran ragunathan Over a year ago

{JSON.stringify(this.state.queryResult)} But it is not the appropriate method you have to extract each attribute from the object and print

Collectives™ on Stack Overflow

Reactjs error, objects are not valid as react child?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related