Return to Answer

If this same scenario is not spread everywhere you can use React's context, especially if you don't want to introduce all the overhead that state management libraries introduce. Plus, it's easier to learn. But be careful; you could overuse it and start writing bad code. Basically you define a Container component (that will hold and keep that piece of state for you) making all the components interested in writing/reading that piece of data to/from its children (not necessarily direct children).

https://reactjs.org/docs/context.html

You could also use a plain React properly instead.

<Component5 onSomethingHappenedIn5={this.props.doSomethingAbout5} /> 

Pass doSomethingAbout5 up to Component 1:

<Component1> <Component2 onSomethingHappenedIn5={somethingAbout5 => this.setState({somethingAbout5})}/> <Component5 propThatDependsOn5={this.state.somethingAbout5}/> <Component1/> 

If this is a common problem, you should starting thinking moving the whole state of the application to somewhere else. You have a few options, the most common are:

https://redux.js.org/

https://facebook.github.io/flux/

Basically, instead of managing the application state in your component you send commands when something happens to get the state updated. Components pull the state from this container as well so all the data is centralized. This doesn't mean you can't use local state any more, but that's a more advanced topic.

If this same scenario is not spread everywhere you can use React's context, especially if you don't want to introduce all the overhead that state management libraries introduce. Plus, it's easier to learn. But be careful; you could overuse it and start writing bad code. Basically you define a Container component (that will hold and keep that piece of state for you) making all the components interested in writing/reading that piece of data to/from its children (not necessarily direct children).

Context - React

You could also use a plain React properly instead.

<Component5 onSomethingHappenedIn5={this.props.doSomethingAbout5} /> 

Pass doSomethingAbout5 up to Component 1:

<Component1> <Component2 onSomethingHappenedIn5={somethingAbout5 => this.setState({somethingAbout5})}/> <Component5 propThatDependsOn5={this.state.somethingAbout5}/> <Component1/> 

If this is a common problem, you should starting thinking moving the whole state of the application to somewhere else. You have a few options, the most common are:

• Redux

• Flux

Basically, instead of managing the application state in your component you send commands when something happens to get the state updated. Components pull the state from this container as well so all the data is centralized. This doesn't mean you can't use local state any more, but that's a more advanced topic.

If this same scenario is not spread everywhere you can use React's context, especially if you don't want to introduce all the overhead that state management libraries introduce. Plus, it's easier to learn. But be careful; you could overuse it and start writing bad code. Basically you define a Container component (that will hold and keep that piece of state for you) making all the components interested in writing/reading that piece of data its children (not necessarily direct children).

https://reactjs.org/docs/context.html

You could also use a plain React properly instead.

<Component5 onSomethingHappenedIn5={this.props.doSomethingAbout5} /> 

Pass doSomethingAbout5 up to Component 1

 <Component1>   <Component2 onSomethingHappenedIn5={somethingAbout5 => this.setState({somethingAbout5})}/>   <Component5 propThatDependsOn5={this.state.somethingAbout5}/>  <Component1/> 

If this is a common problem, you should starting thinking moving the whole state of the application to somewhere else. You have a few options, the most common are:

https://redux.js.org/

https://facebook.github.io/flux/

Basically, instead of managing the application state in your component you send commands when something happens to get the state updated. Components pull the state from this container as well so all the data is centralized. This doesn't mean you can't use local state any more, but that's a more advanced topic.

If this same scenario is not spread everywhere you can use React's context, especially if you don't want to introduce all the overhead that state management libraries introduce. Plus, it's easier to learn. But be careful; you could overuse it and start writing bad code. Basically you define a Container component (that will hold and keep that piece of state for you) making all the components interested in writing/reading that piece of data to/from its children (not necessarily direct children).

https://reactjs.org/docs/context.html

You could also use a plain React properly instead.

<Component5 onSomethingHappenedIn5={this.props.doSomethingAbout5} /> 

Pass doSomethingAbout5 up to Component 1:

<Component1> <Component2 onSomethingHappenedIn5={somethingAbout5 => this.setState({somethingAbout5})}/> <Component5 propThatDependsOn5={this.state.somethingAbout5}/> <Component1/> 

If this is a common problem, you should starting thinking moving the whole state of the application to somewhere else. You have a few options, the most common are:

https://redux.js.org/

https://facebook.github.io/flux/

Basically, instead of managing the application state in your component you send commands when something happens to get the state updated. Components pull the state from this container as well so all the data is centralized. This doesn't mean you can't use local state any more, but that's a more advanced topic.

If this same scenario is not spread everywhere you can use React's context, specially if you don't want to introduce all the overhead that state management libraries introduce. Plus, it's easier to learn. But be careful, you could overuse it and start writing bad code. Basically you define a Container component (that will hold and keep that piece of state for you) making all the components interested in writing/reading that piece of data its children (not necessarily direct children)

https://reactjs.org/docs/context.html

You could also use plain React properly instead.

<Component5 onSomethingHappenedIn5={this.props.doSomethingAbout5} /> 

pass doSomethingAbout5 up to Component 1

 <Component1> <Component2 onSomethingHappenedIn5={somethingAbout5 => this.setState({somethingAbout5})}/> <Component5 propThatDependsOn5={this.state.somethingAbout5}/> <Component1/> 

If this a common problem you should starting thinking moving the whole state of the application to someplace else. You have a few options, the most common are:

https://redux.js.org/

https://facebook.github.io/flux/

Basically, instead of managing the application state in your component you send commands when something happens to get the state updated. Components pull the state from this container as well so all the data is centralized. This doesn't mean can't use local state anymore, but that's a more advanced topic.

If this same scenario is not spread everywhere you can use React's context, especially if you don't want to introduce all the overhead that state management libraries introduce. Plus, it's easier to learn. But be careful; you could overuse it and start writing bad code. Basically you define a Container component (that will hold and keep that piece of state for you) making all the components interested in writing/reading that piece of data its children (not necessarily direct children).

https://reactjs.org/docs/context.html

You could also use a plain React properly instead.

<Component5 onSomethingHappenedIn5={this.props.doSomethingAbout5} /> 

Pass doSomethingAbout5 up to Component 1

 <Component1> <Component2 onSomethingHappenedIn5={somethingAbout5 => this.setState({somethingAbout5})}/> <Component5 propThatDependsOn5={this.state.somethingAbout5}/> <Component1/> 

If this is a common problem, you should starting thinking moving the whole state of the application to somewhere else. You have a few options, the most common are:

https://redux.js.org/

https://facebook.github.io/flux/

Basically, instead of managing the application state in your component you send commands when something happens to get the state updated. Components pull the state from this container as well so all the data is centralized. This doesn't mean you can't use local state any more, but that's a more advanced topic.