React JSON is undefined

Question

I'm fetching this JSON from an API:

{
  "data": {
    "email": "test@tre.com",
    "inserted_at": "2021-03-30T15:37:06",
    "links": [
      {
        "id": 1,
        "title": "My link title",
        "url": "http://google.com"
      },
      {
        "id": 2,
        "title": "My Youube title",
        "url": "http://youtube.com"
      }
    ]
  }
}

I'm fetching it this way using Hooks:

export default function Notes() {
  const [json, setJSON] = useState([]);

  useEffect(() => {
    fetch("http://localhost:4000/api/users/1", {
      method: "GET"
    })
      .then((response) => response.json())
      .then((json) => {
        // console.log(data);
        setJSON(json);
      })
      .catch((err) => {
        console.error(err);
      });
  }, [setJSON]);

Then I try to show it like this:

return (
    <>
      <div className="content">
          {JSON.stringify(json)}
          <h1>{json.email}</h1>
</div>
</>
);

The line {JSON.stringify(json)} shows the JSON.

But the line <h1>{json.email}</h1> doesn't show anything.

I don't know why that happens and how can I access my variables.

Thanks . I appreciate any help

Yes, but then it says that json.data is undefined. I don't know why. I typed json.data.email — manuel.menendez, Mar 30 '21 at 21:10
Does this answer your question? [Reactjs async rendering of components](https://stackoverflow.com/questions/27192621/reactjs-async-rendering-of-components) While it uses a class component, the problem/solution are the same. Fetching is async so the `data` is undefined until it's available, so you must handle that state (loading) before using the data. — Emile Bergeron, Mar 30 '21 at 21:11
@manuel.menendez you're working with asynchronous data fetching, it doesn't matter what is used to fetch the data. — Emile Bergeron, Mar 30 '21 at 21:13
@EmileBergeron ok, but the JSON.stringify works cause it's reading it. Then why the line below doesn't work? I'm completely lost — manuel.menendez, Mar 30 '21 at 21:15

ArrowHead · Accepted Answer · 2021-03-30T21:24:49.030

2

Is the data in the form of an array or an object?

You defined the initial state as and array ad hence you cannot do

// you can't do json.email if you expect the response as and array


 const [json, setJSON] = useState([]);

change it to

 const [json, setJSON] = useState({});

if it is an object. Then in the template do

{json.data && <h1>{json.data.email}</h1>}

edited Mar 30 '21 at 21:24

answered Mar 30 '21 at 21:16

ArrowHead

609
5
16

1

According to the data in the question, it's probably closer to `json.data.email`, and I wouldn't initialize the state with an object (nor an array), otherwise, the condition becomes useless. Just `useState()` would be enough to prevent rendering until the data is received. – Emile Bergeron Mar 30 '21 at 21:20
yes, you're right. I had that wrong. but still I'm receiving json.data is undefined. I'm completely lost – manuel.menendez Mar 30 '21 at 21:20
emile.bergeron, you got it. Guys thanks. How can I give you the SOLVED? – manuel.menendez Mar 30 '21 at 21:22
1

Yes accepting this answer would be fine ;) – Emile Bergeron Mar 30 '21 at 21:26

score 1 · Answer 2 · edited Mar 30 '21 at 21:34

1

<h1>{json.data && json.data.email}</h1>

instead of

<h1>{json.email}</h1>

edited Mar 30 '21 at 21:34

Emile Bergeron

17,074
5
83
129

answered Mar 30 '21 at 21:23

Bogdan Pryvalov

156
1
7

React JSON is undefined

{json.email}

2 Answers2