Q:

React: How can I pass data between independent components

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?.

A:

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

