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.