Uncaught TypeError: Cannot read property 'map' of undefined at {Component}.render in ReactJs

Question

I am Passing my Array to props of sidebar Component like this.and i want to access it in my child component...

When i save the code and go to browser... i am getting

Answer 1

The props in sidebar component, you're passing as name. So, do this:

this.props.name && this.props.name.map(...)

The map method will work only if name props is not undefined. And it is necessary to check if it has value. Because at initial render (renders even with null), you may get error using map. So, checking it is a good practice.

Answer 2

you're not passing the 'items' prop to Sidebar. You're just passing name. You need to do <Sidebar items={items}>

Answer 3

Add console.log(this.props) to your Sidebar's render method to see what you are receiving.