title: In React, how to encapsulate logic in a Todo component?
body: <p>In a Todo app made with <strong>React</strong>, like <a href="https://github.com/mdn/todo-react" rel="nofollow noreferrer">this one</a>, we have a function <code>toggleTaskCompleted</code> in the <code>App</code> component which gets passed as a prop to each <code>Todo</code> component. This function can then be called in the Todo component when a button is clicked resp. a checkbox is toggled.</p>
  <p>I wonder if we can move this logic entirely to the <code>Todo</code> component. For example, this is possible in <strong>Svelte</strong> and <strong>Vue</strong>. In Vue, we create a ref for the list (and in Svelte, a regular variable), loop through it to list all todos and pass the respective todo as a prop. When we change the todo in the <code>Todo</code> component (for example, mark it as complete), this change is automatically also seen by the parent <code>App</code> component. (Meanwhile, the approach by passing a function as a prop is also possible in Svelte and Vue.)</p>
  <p>I prefer this approach much more, it is more encapsulated, and we have to write less code. So I wonder if we can do the same in React.</p>
  <p><em>Edit.</em> Actually, the list <em>is</em> updated in the <code>App</code> component. However, this does not effect a rerender, and also <code>useEffect</code>, depending on the list, won't notice this change. So my question is basically how to inform the component about this change (without writing too much code or even using external state mangement).</p>