Learn how Render Props can help you build a React application.
A common pattern used to share state between components is to use the children prop.
Inside a component JSX you can render {this.props.children}
which automatically injects any JSX passed in the parent component as a children:

render() function takes two arguments, HTML code and an HTML element. The purpose of the function is to display the specified HTML code inside the specified HTML element.

To be able to share the state, you need to use a render prop component, and instead of passing components as children of the parent component, you pass a function which you then execute in {this.props.children()}. The function can accept arguments, :

Instead of using the children prop, which has a very specific meaning, you can use any prop, and so you can use this pattern multiple times on the same component: