I have a quick question. **How to pass state to children of children?**

If the parent has some kind of state, what is the best way in ES6 to pass this state not to its direct child, but to the child of the direct child.

I have attached of image of the layout.

> 
> Main app - is the main component that consists of Header, Sidebar,
>  Content Area.
> 
> 
> Sidebar consists of - Sidebar Items.
> 
> 
> Content Area consists of - Content Items.
> 
> 
> 

**Main question**

How can I by clicking *Sidebar Item* update the components that are in *Content Area*? 

Please note that this layout has 6 components ( App, Header, Sidebar, Content Area, Sidebar Item, Content Item).

**Image**

[![enter image description here](https://i.stack.imgur.com/jad09.jpg)](https://i.stack.imgur.com/jad09.jpg)