Can't access nested JSON with react & hooks. TypeErrors

Question

JSON

This is how the json object looks in state.

{ 
  "gender": "male",
  "name": {
    "title":"Mr."
    "first":"Mike",
    "last": "Wazowski"
  },
  ...
}

The React

const App = () => {
  const [user, setUser] = React.useState([]);

  React.useEffect(() => {
    axios
      .get("https://randomuser.me/api")
      .then((response) => {
        const info = response.data.results[0];
        setUser(info);
      })
      .catch((err) => {
        console.log(err);
      });
  }, []);

Accessing the first lvl data works fine

  return (
    <div>
      <h1>Hello, {user.gender}</h1> 
      <h1>Hello, {user.email}</h1> 
    </div>
  )

Calling object returns Err: Objects are not valid as a React child

  return (
    <div>
      <h1>Hello, {user.name}</h1>
    </div>
  )

Calling nested data returns TypeError: user.name undefined error

  return (
    <div>
      <h1>Hello, {user.name.first}</h1>
    </div>
  )

Why can I can access 'first level' data like gender, but not 'second-level' data like name.first?

Do I need some special syntax I'm unaware of?

on the last block of code try {user['name']['first']}. I think it understands name and first as variables? — mah111
– mah111, Commented Jan 21, 2021 at 18:01
@Andreas thanks for the link. So I should JSON.parse(resp.data.results[0]) so that it becomes an object literal? — amadesclaire
– amadesclaire, Commented Jan 21, 2021 at 18:06
I'm not fluent in axios things... Check the content of response.data/response.data.results. If it's a string you might have to parse it first — Andreas
– Andreas, Commented Jan 21, 2021 at 18:08

Nadia Chibrikova · Accepted Answer · 2021-01-21 18:03:16Z

1

I believe your errors happen at different time - you initialize your object as an empty array, so you can access fist level fields (which will be undefined), but not their fields (hence user.name undefined). Then you populate your data and user.name becomes an object and you can't just render in the DOM, so you get Objects are not valid as a React child. To solve this problem just add a null check - <h1>Hello, {user.name && user.name.first}</h1>

answered Jan 21, 2021 at 18:03

Nadia Chibrikova

5,0361 gold badge18 silver badges18 bronze badges

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

3 Comments

Jim J Over a year ago

To build on this, you can also pass a nested empty object in to useState as the default object. Something like const [user, setUser] = React.useState({name: {first: ''}});

amadesclaire Over a year ago

Should I initialize the state as 'null'? The null check did solve the problem though!

Nadia Chibrikova Over a year ago

If you initialize the state as null, you'll have to null check all your fields, which is an option of course, but might be laborious. Or go with the @JimJ suggestion and use a dummy object. Whichever suites you best

10110 · Accepted Answer · 2021-01-21 18:04:05Z

0

I believe that the problem with your code is that you're trying to work with your response.data.results[0] without converting it to a JavaScript Object. That is the response from the API is a JSON and you need to convert it to a JS Object.

Can you try parsing your response.data.results[0] JSON into an Object before using it?

This should work:

const info = JSON.parse(response.data.results[0]);

answered Jan 21, 2021 at 18:04

10110

2,7352 gold badges25 silver badges45 bronze badges

4 Comments

amadesclaire Over a year ago

Just tried it. Got back TypeError: user.name is undefined

10110 Over a year ago

Ok, can you do console.log(info) and share it with us?

amadesclaire Over a year ago

Nadia's null check worked without having to Parse. I'm curious as to why that is, if you'd still like to see the console output let me know.

10110 Over a year ago

Oh, glad you found a solution. :)

Collectives™ on Stack Overflow

Can't access nested JSON with react & hooks. TypeErrors

JSON

The React

2 Answers 2

3 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

JSON

The React

2 Answers 2

3 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related