How to handle layout containers which do not match component hierarchy?

Question

As far as I've understood, in React, components should communicate in an hierarchical order through the nested hierarchy. Given this, how should it be handled when an application's layout container structure don't match the natural/expected/logical component hierarchy.

As an example of my question, I've come up with a scenario based on my app, that I'm not sure how to implement properly:

The screen is split vertically in two halves. This is done having two div containers side by side. To each halve there's a corresponding component: ItemsList and ItemDetails.

Nested inside ItemsList, there are several Item components we can click on.

Each time there is click on an Item, the corresponding defined _itemID prop value needs to be sent to ItemDetails so it can load and display Item details in there.

The problem is, given the component structure, how can ItemDetails be a child of Item and still be on the right section of the screen where it's intended to be. (At least without some weird CSS which I want to avoid).

Here's the layout:

<div className="wrapper">
    <div className="itemList" style="width:50%; display:inline-block;">
        <div className="item">item1</div>
        <div className="item">item1</div>
        <div className="item">item1</div>
    </div>

    <div className="itemDetails" style="width:50%; display:inline-block;">
        The details of the selected item.
    </div>

</div>

I believe I could send information from a child to parent following up the hierarchy, but this don't seem practical. Considering this scenario is just a simplification of my actual problem (I have a lot more nested components), I believe this would make the code messy and confuse.

Is there a clean, simple way to achieve this in React? Am I missing some concept?

Answer 1

If it were me I would have a container component based off your wrapper. It would handle all state changes and be the source of truth for what the currently selected item is. Then you'd just need to pass a callback from the wrapper component through props down to your ItemsList that would handle setting the state of the active item.

Then you can just pass activeItem as a prop to the itemDetails component. It is a fairly common pattern to have a container component that manages state and passes callback functions down to child components that would allow them to create an action that changes the state of the container

The heirarchy would look like:

<Wrapper> // holds the state of active item and provides functions to change the active item
 <ItemList /> // provides a list of items that when clicked sets active
 <ItemDetail /> // shows the detail of the currently select item
</Wrapper>

Here is a pen of what i'm trying to explain

http://codepen.io/finalfreq/pen/KgEzgE