Why am I getting a TypeError: Cannot read property of undefined error in React?

Question

React

Good day.
I get the error `TypeError: Cannot read property 'friends' of undefined`
I can't figure out how to fix it or what I'm doing wrong.
Swears at this.

const Sidebars = (props) => {
    let sidebarsElements = props.state.friends.map( friend => <SideItem name={friend.name} id={friend.id} key={friend.id}/> );
}

Sidebars trying to render here

<nav>
<ul>
    <h3>Friends</h3>
    <Sidebars />
    <ul>
    </ul>
    </nav>

And this is my state, here I wrote the array manually

let state = {
 sidebarList: {
    friends: [
    {id: 11, name: 'Andrew'},
  {id: 12, name: 'Aleksei'},
  {id: 13, name: 'Mikhail'},
    ]
    }
}

Answer 1

To access props from a child component, you need to pass them to the child itself in the parent component:

<nav>
<ul>
    <h3>Friends</h3>
    <Sidebars state={state.sidebarList} />
    <ul>
    </ul>
    </nav>