One of react's core tenets is unidirectional data flow. Trying to use it in a bidirectional way is... painful. There is also a struggle with state vs props.

One of react's core tenets is unidirectional data flow. Trying to use it in a bidirectional way is... painful. There is also a struggle with state vs props. The quick version is that state is internal to a component and is changeable directly by it, and props are given out by the parent and are not directly changeable. Generally the way the bidirectional issue is solved is by closing the loop via dispatchers and stores. The child components send out actions to the stores, which then flow down through the parent, back in to the child. Turning what used to be a bidirectional flow to a unidirectional flow (sometimes at the cost of a bit of boilerplate for pre-existing components). I guess the real question is, what is the use for the parent to be able to see the 'state' (the child components internal state)? The answer to that question (in my limited experience) has often been either 'to trigger an event (ex: save a form)' or 'so the parent can make some other rendering decision'. Both of which I've generally been able to solve via a flux implementation and possibly changing a 'state' into a 'prop' in the child (where the child gets a prop, some action is taken, and instead of changing state internally, an event is dispatched to the store with the new data, and the parent rerenders the child with the new 'prop'). But ultimately, hack it how you need. It's your code after all.