Uncaught Error: Objects are not valid as a React child with nested json objects-CodePudding

When calling an API using axios async get with wait in a class I'm getting the error;

Uncaught Error: Objects are not valid as a React child (found: object with keys {dhcp_lease_count, new_dhcp_lease_count, unracked_device_count, nodediscover_count, site_data}). If you meant to render a collection of children, use an array instead.

The API is returning the data to res.data but the state.data is undefined


lass MainContent extends Component {
    constructor(props) {
        super(props);

        this.state = {
            data: {},
            isLoaded: false,
            access_token: "my_token_xxxxx",
        }
    }

    componentDidMount = () => {
        this.getData()
    }

    getData = async () => {
        try {
            axios.defaults.headers.common['Authorization'] = "Token "   this.state.access_token;
            const res = await axios.get("http://localhost:7001/api/plugins/dashboard");
            this.setState({isLoaded: true, data: res.data})
        } catch (error) {
            console.log(Object.keys(error), error.message);
        }
    }

    render() {
        const { isLoaded, data } = this.state;
        return (
            <div>
                {isLoaded ? <h3>{data}</h3> : <h3>Loading...</h3>}
            </div>);
    }
}

If I use a browser or postman I get

{
    "dhcp_lease_count": 169,
    "new_dhcp_lease_count": 19,
    "unracked_device_count": 4,
    "node_count": 135,
    "site_data": [
        {
            "site_temp_avg": 0,
            "site_rack_count": 0,
            "site_utilization": 0,
            "site_device_count": 0
        },
        {
            "site_temp_avg": "70.6",
            "site_rack_count": 8,
            "site_utilization": 57.375,
            "site_device_count": 167
        },
        {
            "site_temp_avg": 0,
            "site_rack_count": 0,
            "site_utilization": 0,
            "site_device_count": 0
        }
    ]
}

I think it's not parsing the API data into object correctly.

I'm trying to get data to display in a dashboard component. The sit_data will go into a small table.

After Ray and Dev's replies I was able to figure out how to change my rendering to the following to get the desired output.

return (
<div>
    <h3>DHCP Leases - {data['dhcp_lease_count']}</h3>
    <h3>New DHCP Leases - {data['new_dhcp_lease_count']}</h3>
    <h3>Unracked Devices - {data['unracked_device_count']}</h3>
    <h3>Nodediscover list - {data['nodediscover_count']}</h3>
    <table>
        <tbody>
        {data["site_data"].map((row) => (
            <tr key={row.site_id}>
                {Object.values(row).map((val) => (
                    <td style={{padding: '20px'}}>{val}</td>
                ))}
            </tr>
        ))}
        </tbody>
    </table>
</div>);

CodePudding user response：

The error you are getting happens because you are trying to directly render the response object in the JSX code.

If you want to see the entire data rendered on your app you could try {JSON.stringify(data)}

Otherwise you should manipulate that data object to render it properly.