How can I display item in ToDo List - reactjs

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>