javascript - Remove current Todo in mapped element with Delete button within <li> not working

Question

I am trying to create my very first Todo list from SCRATCH. This means absolutely no tutorials or copying code, its more of a test for myself.

However, I have hit a bit of a brick wall. Currently my app works as such.

An input component is made which will allow the user to input a todo, it contains a submit button. When the todo is submitted, the prop is passed down to a Todos.js component, which contains a 'map' which maps out all the todos onto a page, it will render a LI inside containing the Todo, and the LI will contain a delete button.

However, I can't seem to figure out how to delete the todo using the delete button, could somebody help point me in the correct direction?

Code:

Todos.js

import React, { Component } from "react"

const Todos = (props) => {
  const deleteTodo = (e) => {
    console.log(e)
  }

  return (
    <div class="todo_list">
      <ul>
        {props.todos.map((todo) => {
          return (
            <li key={todo} className="new_todo">
              {todo}
              <button id="todo_del" onClick={deleteTodo}>
                Delete
              </button>
            </li>
          )
        })}
      </ul>
    </div>
  )
}

export default Todos

Input.js

import React, { useState } from "react"

import Todos from "./Todos"

const Input = (props) => {
  const [todo, setTodo] = useState([])
  const [input, setInput] = useState("")

  const setInputState = (e) => {
    setInput(e.target.value)
    console.log(input)
  }

  const addTodo = (e) => {
    e.preventDefault()
    setTodo([...todo, input])
    setInput("")
  }

  return (
    <>
      <div class="input">
        <form>
          <input
            type="text"
            id="todo_input"
            onChange={setInputState}
            value={input}
          />
          <input type="submit" id="submit_btn" onClick={addTodo} />
        </form>
      </div>
      <div class="todo_list">
        <Todos todos={[...todo]} />
      </div>
    </>
  )
}

export default Input

question from:https://stackoverflow.com/questions/65546037/remove-current-todo-in-mapped-element-with-delete-button-within-li-not-working

Answer 1

Since you mention this is an exercise for yourself, I'm not sure how much detail to use, but here goes.

The list of todos is maintained by the useState hook in the Input component. You're allowed to pass functions as props.

Also remember that map() will allow you pass in both a value (todo) and a second argument (index). Then the components you're mapping will be aware of the index and can pass that into your deleteTodo() function.