在 preact 中重用“add todo”组件作为“edit todo”

Question

I just copied the todo from w3 schools and added some functionality with preact. So far all working fine with functional components. Don't mind the string literals and the inline styles.

What I am not getting is:

I have the empty "form" for adding todos:

    const EditTodo = (props) => {
    return html`
      <h2 style="margin:5px;">My To Do List</h2>
      <input ref=${todoTitleRef} type="text" placeholder="Title..." value=${props.todo.title}/>
      <textarea value=${props.todo.content} ref=${todoContentRef} style="margin-top: 20px;" type="text" id="myText" placeholder="Text..."></textarea>
    `;
  }

I wanted to reuse it for editing a todo. So my question is: How can I add a hook in the root component to re-render the EditTodo but passing the todo that was clicked to edit?

this is the main component:

return html`
  <div class="app">
    <div id="myDIV" class="header">
      ${html`<${EditTodo} todo=${{}}/>`}
      <div style="margin-top: 40px;"><span class="addBtn" onClick=${addTodo}>Add</span></div>
    </div>
    <ul id="myUL">
      ${todos.map((todo) => html`<${TodoItem} todo=${todo}/>`)}
    </ul>
  </div>
  `;

Answer 1

For anyone wondering,

added the const after the reducer:

  const editingTodo = todos.filter(todo=>todo.isEditing);

then changed the prop todo of the main editTodo to:

  ${html`<${EditTodo} todo=${editingTodo.length>0?editingTodo[0]:{}}/>`}