如何在待办事项列表中显示项目

Question

How to make todo list in react.I am following some tutorial how to work with react. This code is using input for adding item to list. How can I add item over h3 element instead input element? This code is working perfect, I am looking for another way. Thank you Here is full code.

import { useState } from 'react'
import { v4 as uuidV4 } from 'uuid'

const Header = () => {
 

const [input, setInput] = useState('')
const [todos, setTodos ] = useState([])

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

const onFormSubmit = (e) => {
  e.preventDefault()
  setTodos([...todos, {id: uuidV4(), title:input, completed:false}])
  setInput('')
} 

  return (
    <section className='header'>
      <h1>ToDo List</h1>

      <form onSubmit={onFormSubmit}>
          <input 
                type="text"
                placeholder='Add Item'
                className='input'
                value={input}
                required
                onChange={onInput} />

          <button 
                className='btn'
                type='submit' > Add </button>      
      </form>
      <br /><br />
       <ul>
         {todos.map((todo) => (      
         
           <li className='todo-list'>  // here is output 
                                       // <h3> { ? } </h3>  it should go todo.title
                                       // can you show me how, pls ? 
              <input 
                 type="text"
                 value={todo.title}
                 className='list'
                 onChange={(e)=>e.preventDefault()} /> 
                

           </li>
         ))}
       </ul>

    </section>
  )
  
};

export default Header;

Answer 1

Get the title of the todo from the todo object passed to.map() function.

<h3>{todo.title}</h3>

 // Get a hook function const {useState} = React; const Header = () => { const [input, setInput] = useState(""); const [todos, setTodos] = useState([]); const onInput = (e) => { setInput(e.target.value); //console.log(input); }; const onFormSubmit = (e) => { e.preventDefault(); setTodos([...todos, { id: Math.random(), title: input, completed: false }]); setInput(""); }; return ( <section className="header"> <h1>ToDo List</h1> <form onSubmit={onFormSubmit}> <input type="text" placeholder="Add Item" className="input" value={input} required onChange={onInput} /> <button className="btn" type="submit"> {" "} Add{" "} </button> </form> <br /> <br /> <ul> {todos.map((todo) => ( <li className="todo-list"> <h3> {todo.title} </h3> <input type="text" value={todo.title} className="list" onChange={(e) => e.preventDefault()} /> </li> ))} </ul> </section> ); }; // Render it ReactDOM.render( <Header />, document.getElementById("react") );

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script> <div id="react"></div>