CODEWITHSUNDEEP
react-native
user1072337
user1072337

Reputation: 12945

React Native - Objects are not valid as a react child

I am pulling some information from the Github api, using the fetch command in React Native.

I have a dashboard that is supposed to display the json info:

class Dashboard extends React.Component{
  render(){
    return(
      <View style={styles.container}>
        <Text> This is the dashboard </Text>
        <Text> {this.props.userInfo} </Text>
      </View>
    )
  }
};

It's complaining and giving me this error:

ExceptionsManager.js:61 Objects are not valid as a React child (found: object with keys {login, id, avatar_url, gravatar_id, url, html_url, followers_url, following_url, gists_url, starred_url, subscriptions_url, organizations_url, repos_url, events_url, received_events_url, type, site_admin, name, company, blog, location, email, hireable, bio, public_repos, public_gists, followers, following, created_at, updated_at}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of Text.

Upvotes: 1

Views: 9401

Answers (1)

Samuli Hakoniemi
Samuli Hakoniemi

Reputation: 19049

You probably want something like this: https://rnplay.org/apps/YDWCxQ

The idea is to go through the props object you have, convert it to array and return the mapping wrapped in correct (<Text>) element:

return Object.entries(this.props.userInfo).map(([key, val], i) => {
  return <Text key={'key-'+ i}>{key +': '+ val}</Text>; 
});

Upvotes: 4

Related Questions