Objects are not valid as a React child, use an array instead

Question

I am trying to render the first and last name from a json request using axios.

I am getting the following error you see in the title. I have included a snack example here reproducing the error exactly as well as added the code below.

Thank you

const plsWork = () => {
    // Make a request for a user with a given ID
   return axios.get('https://randomuser.me/api')
      .then(({data}) => {
        console.log(data);
        return data
      })
      .catch(err => {
        console.error(err);
      });
    
    }  
    
  const userName = (userInfo) => {
    const {name: {first, last}} = userInfo;
    return {first}, {last};
  }

export default function App() {
  const [data, setData] = React.useState(' ')
  const [userInfos, setUserInfos] = React.useState([]);
  

  
  React.useEffect(() => {
    plsWork().then(randomData => {
      setData(JSON.stringify(randomData, null, 4) || 'No user data found.')
      setUserInfos(randomData.results)
    })
  }, []);

  return (
    <View>
    <ScrollView>
      {
        userInfos.map((userInfo, idx) => (
          <Text key={idx}>
            {userName(userInfo)}
          </Text>
        ))
      }
      <Text style={{color: 'black', fontSize: 15}}>
        {data}
      </Text>
    </ScrollView>
    </View>
  );
}

well, i mean, you returned an object, rather than a component to render. If you want to render a string you could just return a string. — user400654
– user400654, Commented May 11, 2022 at 15:10
Does this answer your question? Objects are not valid as a React child — user400654
– user400654, Commented May 11, 2022 at 15:13

mikenlanggio · Accepted Answer · 2022-05-11 15:10:44Z

2

You have to return a React Component in the userName function.

In the line 21: Change from return {first}, {last} to return <>{first}, {last}</>.

It should work! Here is code edited: snack expo

answered May 11, 2022 at 15:10

mikenlanggio

1,1371 gold badge12 silver badges34 bronze badges

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

3 Comments

David Scholz Over a year ago

Plain string: return first + " " + last would also work since the questioner uses a Text component as a parent.

BARNOWL Over a year ago

or template strings could be suffice as well ?

mikenlanggio Over a year ago

@DavidScholz You're right, but I still suggest using Fragments, It resolves every problem like that

Collectives™ on Stack Overflow

Objects are not valid as a React child, use an array instead

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related