Objects are not valid as a React child - is my JSON data bad?

Question

I am aware this has been asked several times on Stack Overflow, but other solutions don't seem to work for me.

I am trying to access the notifications in this JSON file.

My JSON file: https://dinkyapp.000webhostapp.com/db.json

Is my JSON file poorly structured? I know it's pretty big. In the world outside of React, the JSON file works fine. But in React, it's unworkable, no matter if I parse, convert to arrays etc. Should I make multiple smaller files instead?

In my example, I'm trying to access the notifications and return them in the JSX.

I get the error, 'Objects are not valid as a React child'. I also get notifs.map is not a function. Presumably this is because the data being pulled through is not in an array format.

My component code:

 import React, { useState, useEffect } from 'react'; import axios from 'axios'; const GetData = () => { let [notifs, setNotifs] = useState([]); useEffect(() => { axios.get('db.json').then((res) => { var data = res.data.clients.clientID_1.notifications; setNotifs(data); }); }, []); const getIDs = notifs.map(item => { return ( <p key={notifs.reqID}>{notifs.text}</p> ) }) return <div>{getIDs}</div>; }; export default GetData;

I'm nearly about to switch back to Vanilla JS as I have tried so many ways. But I think it may be my JSON data being poor. If anyone could please advise?

Many thanks

Answer 1

that's because you are trying to map over objects, for simplify your JSON could be

"notifications": [
   {
     "user_id": 1 // move user id here
     "timestamp": 1613777053000,
     "reqID": 100012,
     "seen": true,
     "text": "Aaron F accepted your shift swap"
   },
   {
     "user_id": 2, // move user id here
     "timestamp": 1613777053000,
     "reqID": 100012,
     "seen": true,
     "text": "Aaron F accepted your shift swap"
}]

then you now map safely

Answer 2

Try changing it to this:

<p key={item.reqID}>{item.text}</p>

Answer 3

If look at https://dinkyapp.000webhostapp.com/db.json res.data.clients.clientID_1.notifications it is object like:

const notifs = {
    userID_1: [
        {
            timestamp: 1613777053000,
            reqID: 100012,
            seen: true,
            text: 'Aaron F accepted your shift swap',
        },
    ],
    userID_2: [
        {
            timestamp: 1614676200000,
            reqID: 199290,
            seen: true,
            text: 'Sean W approved your Annual Leave request',
        },
        {
            timestamp: 1610719942000,
            reqID: 184828,
            seen: true,
            text: 'Sean W approved your Annual Leave request',
        },
    ],
};

Not array, so you need work with it as an object, example:

const getIDs = Object.keys(notifs).map(key => {
    return (
        <p key={key}>
            From {key}
            {notifs[key].map(n => (
                <p key={n.reqID}>{n.text}</p>
            ))}
        </p>
    );
});