React: How can I pass data between independent components - reactjs

Question

I known how to pass data from a component to other but what I want to do is to have two independent component where one of them pass data to the other.
For example, <Component 1> pass data to <Component 2>. I don't want to pass data to <Component 2> inside the code of <Component 1>. What I want to know if its possible to pass data and how from <Component 1> to <Component 2>. Because, I want to have an independent component which makes its own tasks and at the end of these tasks, pass the data to other component which is not included in her own code.
This would be an example what I would like to do:
class Test extends Component{
constructor(){
super()
}
render(){
return(
<div>
<h1>Test</h1>
<Component 1 />
<Component 2 />
</div>
)
}
}
Therefore, is there any way to pass data between independent components in React.js?.

Answer 1

const { useState, createContext, useContext } = React;
const Context = React.createContext();
const MyComponent = () => {
const { name, updateName } = useContext(Context);
return (<span onClick={() => updateName('Jane')}>{name}</span>);
};
const App = () => {
const [name, updateName] = useState('John');
return (
<Context.Provider value={{ name, updateName }}>
<MyComponent />
<br/>
<MyComponent />
</Context.Provider>
);
};
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.1/umd/react-dom.production.min.js"></script>
<div id="root" />
to exercise the snippet...
click on John to update name to Jane

Answer 2

You should be using state in the parent component that holds both the components and use some way of updating the parent state by the child component and consume it, in its basic way. Advanced way is to use Redux, but I don't think your current example needs it.
Let me show you a small example.
const Component1 = props => (
<div>
<h1>Component 1</h1>
<p>Please change the value here:</p>
<input
type="text"
onChange={e => props.changeState(e.target.value)}
value={props.value}
/>
</div>
);
const Component2 = props => (
<div>
<h1>Component 2</h1>
<p>Let me show the common value here:</p>
<pre>{props.value}</pre>
</div>
);
class App extends React.Component {
state = {
commonValue: "Hello"
};
changeState = val => {
this.setState({
commonValue: val
});
};
render() {
return (
<div className="App">
<Component1
value={this.state.commonValue}
changeState={this.changeState}
/>
<Component2 value={this.state.commonValue} />
</div>
);
}
}
This way, you will be able to change the values from two different components.
Working Snippet
const Component1 = props => (
<div>
<h1>Component 1</h1>
<p>Please change the value here:</p>
<input
type="text"
onChange={e => props.changeState(e.target.value)}
value={props.value}
/>
</div>
);
const Component2 = props => (
<div>
<h1>Component 2</h1>
<p>Let me show the common value here:</p>
<pre>{props.value}</pre>
</div>
);
class App extends React.Component {
state = {
commonValue: "Hello"
};
changeState = val => {
this.setState({
commonValue: val
});
};
render() {
return (
<div className="App">
<Component1
value={this.state.commonValue}
changeState={this.changeState}
/>
<Component2 value={this.state.commonValue} />
</div>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>
Working Demo: https://codesandbox.io/s/priceless-sea-e7d99

Answer 3

If you need to have dependent data for independent components - you need to lift your state up to a common parent component.
For your particular example, the Test component might contain data needed to be shared between Component1 and Component2 as well as handlers for its changing.
You can read more about this in official documentation about Lifting State Up.