title: how to change child component state in reactjs
body: <p>I came across the following problem: I need to use another component's function inside a component:</p>
  <p>header.js</p>
  <pre><code>export default function Header() {
  
    const [showModalLogin ,setShowModalLogin] = useState(false);
  
    return(
      &lt;&gt;
      &lt;span&gt;Hi,  &lt;Link onClick={() =&gt;{ setShowModalLogin(true)}}&gt;login&lt;/Link&gt; &lt;/span&gt;
      {showModalLogin ? &lt;LoginModal setShowModalLogin={setShowModalLogin}/&gt; : ''}
      &lt;/&gt;
    );
  }
  </code></pre>
  <p>home.js</p>
  <pre><code>import Header from '../../components/header/header';
  
  export default function Home() {
  
    return (
      &lt;&gt;
        &lt;Header /&gt;
        &lt;Link onClick={() =&gt;{ setShowModalLogin(true)}}&gt;open login&lt;/Link&gt;
      &lt;/&gt;
  }
  </code></pre>
  <p>How do I do in home.js to call the setShowModalLogin function that is in header.js ? I'm trying to use the context api too, but I still can't solve it.</p>