title: Pass true/false state from functional component in react
body: <p>I would like to read this component's state in other components. </p>
  
  <p>I keep looking for tutorials but i cant find any that explain it in the way that i need. </p>
  
  <pre><code>export default function Task({ task }) {
    const [isDone, setIsDone] = React.useState(false);
    return (
      &lt;TaskWrapper&gt;
        &lt;CheckBox&gt;
          &lt;NotDone isDone={isDone} onClick={() =&gt; setIsDone(true)} /&gt;
          &lt;Done
            isDone={isDone}
            src={checkMark}
            alt={"is done"}
            onClick={() =&gt; setIsDone(false)}
          /&gt;
        &lt;/CheckBox&gt;
        &lt;Todo&gt;{task}&lt;/Todo&gt;
      &lt;/TaskWrapper&gt;
    );
  }
  </code></pre>
  
  <p>How do i pass "isDone" to an other component and then check if it's true or false and then act on that information??</p>
  
  <p>Thanks in advance!</p>
  
  <p>EDIT:</p>
  
  <p>I would like to know if a task is done or not in here. </p>
  
  <pre><code>export default function TodoList() {
    return (
      &lt;Todos&gt;
        &lt;Task task={"Task 1"} /&gt;
        &lt;Task task={"Task 2"} /&gt;
        &lt;Task task={"Task 3"} /&gt;
      &lt;/Todos&gt;
    );
  }
  </code></pre>