Uncaught Error: Objects are not valid as a React child

Question

This is quite confusing for me but I'm clearly missing something.

To get up to speed, here is my current react-router setup

I've already done {React.cloneElement(this.props.children, this.props)} within the layout of the app component, and other routes are working fine passing the props down via {...this.props}. Just not on the children components of the IndexRoute component.

render((
  <Provider store={store}>
    <Router history={history}>
      <Route path='/' component={App}>
        <IndexRoute component={Week} />
        <Route path='/cook-book' component={Cookbook} />
        <Route path='/cook-book/:recipe' name='Recipe' component={Recipe} />
      </Route>
    </Router>
  </Provider>
), document.getElementById('app'))

And the error occurs within the Week component which is below:

render () {
    return (
      <div className='week__weekly-container'>
        <h1>This is the weekly container</h1>
        <Day title='Monday' {...this.props} />
        <Day title='Tuesday' {...this.props} />
        <Day title='Wednesday' {...this.props} />
        <Day title='Thursday' {...this.props} />
        <Day title='Friday' {...this.props} />
        <Day title='Saturday' {...this.props} />
        <Day title='Sunday' {...this.props} />
      </div>
    )
  }

React throws an error when I do this (but only on this component): Uncaught Error: Objects are not valid as a React child (found: object with keys...

As I've done it Cookbook & Recipe components: (See below).

I'm wondering if it's something to do with the Week Component being the IndexRoute? But other than that I'm completely lost.

Cookbook Component which works fine...:

render () {
    return (
      <div className='container'>
        <h1>Cookbook Recipes</h1>
        <Recipes {...this.props} />
      </div>
    )
  }

Recipe component uses the same thing...

<RecipeWeekDay name='Monday' mealName={meal.name} mealSlug={meal.slug} {...this.props} />

Karl Taylor Karl Taylor · Accepted Answer · 2017-03-14T14:35:29

I realised that within my Day component, I was trying to render what I thought was a string but was ultimately a Javascript object which was throwing the error.

class Day extends React.Component {
  render () {
    console.log(this.props)
    return (
      <div className='week__single-week'>
        <h4 className='week__title text-center'>{this.props.title}</h4>
        <p>{this.props.meals}</p> //- This was an array of objects and not a string.
      </div>
    )
  }
}
export default Day

Uncaught Error: Objects are not valid as a React child

1 Answers