Q:

Converting site from jQuery to React - toggling from component

First time asking on SO, so I hope I'm doing it right.
Very recently took up React. I'm currently trying to convert an old site of mine into React.
The data is 444 markdown files that are loaded into an array of objects (front matter and content), containing information about various medical drugs. In the left hand side, I want a sidebar containing a list of all the names of the drugs, and when clicked it will then toggle a component displaying the actual contents of the markdown file corresponding to the clicked name.
You can see the jQuery-based site at http://farma.morsby.dk (it's in Danish, but the contents really don't matter). I'm stuck at how I would go about toggling the info box (middle) by clicking the name (left side navigation).
An image depicting the issue is here (we can disregard the right hand pane, I just added it for good measure as it's currently on the site and I would want it in the end):
Page setup and component setup (sorry, can't post images [yet]).
Current setup is sort of like this:
<Parent /> calls <NavContainer /> and <InfoContainer />
<NavContainer /> calls (amongst other components) <NavItem /> which then displays the individual drug names.
<InfoContainer /> calls <InfoItem /> which then displays the individual info boxes. <InfoItem /> should toggle on the corresponding<NavItem />´s onClick.
As I understand it, the <NavContainer /> and <InfoContainer /> need a common parent to communicate. But I can't really figure out what to pass down. For the navigation, I need all drugs. But for <InfoContainer />, should I pass down all drugs and some information about whether the individual box is displayed or not, or should I only pass down the currently toggled boxes? I could (I guess) hard code some states that I could then mutate, but I would prefer a more dynamic approach (if I added/removed/renamed a drug, I wouldn't need to change the code).
In jQuery, of course, it's trivial to toggle by ID for instance. Maybe I shouldn't use React for this type of app at all?
I'm not looking for exact code solutions to the problem but more a concept of how I would go about solving my problem – if this is even something React would be good at.
Thanks!

A:

Having components affect other components that aren't descendants of theirs is not easy in basic React and usually involves a common ancestor and a whole bunch of callbacks.  I recently wrote an answer on a similar issue which might give you a few ideas on how to move forward with your app in React
If I were you, I would look into a Flux (or Flux-like) implementation, such as Redux, and have the NavItems dispatch actions into the store to toggle the visible state of the InfoItems who would in turn, use the store state to determine if they should be rendered or not (or perhaps InfoContainer would do this for all InfoItems).
Hope this helps.

