在反应中从功能组件传递真/假状态

Question

I would like to read this component's state in other components.

I keep looking for tutorials but i cant find any that explain it in the way that i need.

export default function Task({ task }) {
  const [isDone, setIsDone] = React.useState(false);
  return (
    <TaskWrapper>
      <CheckBox>
        <NotDone isDone={isDone} onClick={() => setIsDone(true)} />
        <Done
          isDone={isDone}
          src={checkMark}
          alt={"is done"}
          onClick={() => setIsDone(false)}
        />
      </CheckBox>
      <Todo>{task}</Todo>
    </TaskWrapper>
  );
}

How do i pass "isDone" to an other component and then check if it's true or false and then act on that information??

Thanks in advance!

EDIT:

I would like to know if a task is done or not in here.

export default function TodoList() {
  return (
    <Todos>
      <Task task={"Task 1"} />
      <Task task={"Task 2"} />
      <Task task={"Task 3"} />
    </Todos>
  );
}

Answer 1

You could do this with context, but I believe there is more simple solution. You just have to keep tasks information in TodoList.

const tasks = [{name: "task 1", id: 1}, {name: "task 2", id: 2}]
export default function TodoList() {
const [completedTasks, setCompletedTasks] = React.useState([]);
  return (
    <Todos>
       {tasks.map((task) => 
         <Task 
          task={task.name}
          isDone={completedTasks.includes(task.id)}
          onComplete={() => setCompletedTasks([...completedTasks, task.id)])}
          onRemoveFromCompleted={() => setCompleted(...completedTasks.filter(t => t.id !== task.id)))} />)}
    </Todos>
  );

}

And than in task component just pass the values like so

export default function Task({ task, isDone, onComplete, onRemoveFromCompleted }) {

   return (
    <TaskWrapper>
     <CheckBox>
      <NotDone isDone={isDone} onClick={onComplete} />
       <Done
         isDone={isDone}
         src={checkMark}
         alt={"is done"}
         onClick={onRemoveFromCompleted}
       />
    </CheckBox>
   <Todo>{task}</Todo>
</TaskWrapper>
);
}

Answer 2

Can't you just pass props from the Task component to the TodoList component?

export default function Task({ task }) {
  const [isDone, setIsDone] = React.useState(false);
  return (
    <TaskWrapper
        isDone={isDone}
    >
      <CheckBox>
        <NotDone isDone={isDone} onClick={() => setIsDone(true)} />
        <Done

          src={checkMark}
          alt={"is done"}
          onClick={() => setIsDone(false)}
        />
      </CheckBox>
      <Todo>{task}</Todo>
    </TaskWrapper>
  );
}
export default function TodoList(props) {
  return (
    <Todos>
      <Task isDone={props.isDone} /> 

    </Todos>
  );
}