Have all of your components, A, B and C, owned by component X and move the state there. Have a handler in component X that you pass into the children, and that handler will do a setState
on X.
An alternative is to use the Flux approach. Here you would use a store and have each component read from that shared store's state. The change from F to C and back would be done via an action creator and store handler.
The second approach is an extrapolation of the first: you are essentially 'lifting' the state up into the global scope with a store, whereas you are lifting it into X's scope by using X's state.
In general in React, you want your components to be as stateless as possible. Therefore I would recommend using the first approach. You can then lift the state higher if necessary (say X, Y and Z need to share the state) and A, B and C are left untouched.
Using props rather than state has the nice side effect of forcing you to think about the API of your components. Exactly what data does this component require to do its job? Then those requirements are passed as props.
If I were to give any single piece of advice to someone starting in React, it would simply to not use state whenever possible. Even when you think you need it, you can often remove it, so you should be trying as hard as possible to avoid state.
I'm working on an app with hundreds and hundreds of components, and I can barely think of a place where we use this.setState