title: Passing data to sibling components with react hooks?
body: <p>I want to pass a variable <code>username</code> from <code>sibling1</code> component to <code>sibling2</code> component and display it there.</p>
  <p>Sibling1 component:</p>
  <pre><code>const sibling1 = ({ usernameData }) =&gt; {
     // I want to pass the username value I get from input to sibling2 component
    const [username, setUsername] = useState(&quot;&quot;); 
  
    const handleChange = event =&gt; {
      setUsername(event.target.value);
    };
  
    return (
      &lt;Form.Input
          icon='user'
          iconPosition='left'
          label='Username'
          onChange={handleChange}
        /&gt;
      &lt;Button content='Login' onClick={handleClick} /&gt;
    )
  }
  
  export default sibling1;
  </code></pre>
  <p>Sibling2 component:</p>
  <pre><code>export default function sibling2() {
    return (
      &lt;h1&gt; Here is where i want to display it &lt;/h1&gt;
    )
  }
  </code></pre>