How to receive JSON Object from node and display it on client side in react?

Question

I am sending a json object using res.json. On the client side I am trying to set the json object to a piece of state.

Ive tried to .json() the response but that still does not let me assign it.

This is the server side sending the JSON File

app.get('/api/getPlace', async (req, res) => {
        const response = await client.search({
            searchType: "Coffee",
            location: "San Francisco, CA",
        })

        const foodPlace = response.jsonBody.businesses[9];

        console.log(foodPlace);
        res.json(foodPlace)
    })

Below is the whole component file to render the json object

import React, { Component } from 'react';
import axios from 'axios';

class RandomPlace extends Component {
    constructor(props) {
        super(props);
        this.state = {
            response: {},
        };
    }

    async componentDidMount() {
        const res = axios.get('/api/getPlace');
        this.setState({ response: res.data })

    }

    render() {
        return (
            <div>
                {this.state.response}
            </div>
        );
    }
}

export default RandomPlace;

Mario Vernari · Accepted Answer · 2019-10-06 03:05:54Z

2

The client call must be awaited:

async componentDidMount() {
    const res = await axios.get('/api/getPlace');
    this.setState({ response: res.data })

}

answered Oct 6, 2019 at 3:05

Mario Vernari

7,4241 gold badge37 silver badges57 bronze badges

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

2 Comments

Sibbs Over a year ago

I get this error when I add await × Objects are not valid as a React child (found: object with keys {}). If you meant to render a collection of children, use an array instead.

Mario Vernari Over a year ago

That's because the response contains an object, and the <div> content must be HTML elements. Try to replace the <div> inner as follows: JSON.stringify(this.state.response)

theincrediblethor · Accepted Answer · 2019-10-06 03:19:42Z

0

import React, { Component } from 'react';
import axios from 'axios';

class RandomPlace extends Component {
    constructor(props) {
        super(props);
        this.state = {
            response: {},
        };
    }

    async componentDidMount() {
        const res = await axios.get('/api/getPlace');
        this.setState({ response: res.data })

    }

    render() {
        return (
            <div>
                {this.state.response}
            </div>
        );
    }
}

export default RandomPlace;

REST api calls are asynchronous, which means the code proceeds to the next statement without waiting for the api call to compelete. When await is adding before the call, the execution will pause till the call completes or timesout (if specified) before proceeding to the next line. async/await is a better alternative to promises.

answered Oct 6, 2019 at 3:19

theincrediblethor

4482 silver badges9 bronze badges

2 Comments

Sibbs Over a year ago

I get this error when I add use your code × Objects are not valid as a React child (found: object with keys {}). If you meant to render a collection of children, use an array instead.

theincrediblethor Over a year ago

That's probably because your res object looks like this : { data: { field1:value1}}. If thats the case you should specify the exact field you want to use in the render() method as objects cannot be used as a react child element. You can do: {this.state.response.field1}

Collectives™ on Stack Overflow

How to receive JSON Object from node and display it on client side in react?

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related