React todo list

Hi, here you go the code to create a todo list in react, I hope this will be very helpful for you.
// Dependencies
import React, { useState } from 'react';
// Styles
import './todo.css';
// Todo component
const Todo = () => {
// Local state
const [userValue, setUseValue] = useState("");
const [todoList, setTodoList] = useState([]);
// Methods
// Saving user value to local state
const handleUserValue = ({target: { value }}) => {
setUseValue(value)
}
// Saving the user value
const addTodo = () => {
// Validating empty input and is not a number
if (userValue !== "" && isNaN(userValue)) {
// Pushing into the local state array
setTodoList([...todoList, userValue]);
}
// Cleaning userValue every onClick
setUseValue("");
}
return (
<>
<section className="form">
<h2>Insert a todo:</h2>
<input
type="input"
placeholder="Insert todo"
id="todoInputText"
className="todoText"
autoFocus="autofocus"
value={userValue}
onChange={handleUserValue}
/>
<input
type="submit"
value="Save"
id="todoInputSave"
className="todoButton"
onClick={addTodo}
/>
</section>
<section className="todoList">
<h3>My todo list:</h3>
{/* If the todo list array have something
then show the <ul></ul> */}
{
todoList.length > 0 ? (
<>
<ul>
{todoList.map((todo, i) => {
return <li key={i}>{ todo }</li>
})}
</ul>
</>
) : ''
}
</section>
</>
)
}
export default Todo;
.form {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.form .todoText {
width: 400px;
border-radius: 5px;
height: 40px;
padding: 10px;
margin: 20px;
box-sizing: border-box;
border: 1px solid gray;
font-size: 16px;
outline: 0;
}
.form h2 {
font-size: 18px;
font-weight: bold;
text-decoration: underline;
}
.form .todoButton {
width: 200px;
border-radius: 5px;
height: 40px;
background-color: #0d2a94;
color: white;
outline: 0;
}
.todoList {
height: 100%;
width: 100%;
display: flex;
align-items: center;
flex-direction: column;
}
.todoList ul {
padding: 0px;
margin: 0px;
}
.todoList h3 {
font-size: 18px;
font-weight: bold;
text-decoration: underline;
}

Criss.