react render - objects are not valid as a React child

Question

I am trying to loop through my events in my render:

let {events} = this.props;

    if(events.length > 0) {
       const events = events.map((event) => <Text>{event.author}</Text>);
    }

    if (this.props.hasErrored) {
        return <Text>Sorry! There was an error loading the events</Text>;
    }

    if (this.props.isLoading) {
        return <Text>Loading…</Text>;
    }

    return (
        <View>
          {events}
        </View>
    );

The error in full is:

Objects are not valid as a React child (found: object with keys {events, rest_url, total, total_pages})

Any ideas?

Answer 1

const s and let s are block scoped , so the issue belongs to your events variable. You can remove the if statement which belong to events variable & move it to render method, like below:

const {events} = this.props;

if (this.props.hasErrored) {
  return <Text>Sorry! There was an error loading the events</Text>;
}

if (this.props.isLoading) {
  return <Text>Loading…</Text>;
}

return (
  <View>
    {events && events.length && events.map((event) => <Text>{event.author}</Text>)}
  </View>
);

Answer 2

I think the problem is:

return (
    <View>
      {events}
    </View>
);

I guess events is a regular JavaScript object? In this case React doesn't know how to render it.

Answer 3

You are creating a new events variable in first if condition.

Just delete the const inside first if statement