React useState TODO app

TodoApp.js

import React, { useState } from "react";
import uuid from "uuid/v4";

const Todo = ({ todo, deleteTodo }) => {
  return (
    <li
      key={todo.id}
      style={{ textDecoration: todo.completed ? "line-through" : "" }}
    >
      {todo.text} <button onClick={() => deleteTodo(todo.id)}>X</button>
    </li>
  );
};

const TodoList = ({ todos, deleteTodo }) => {
  return (
    <ul>
      {todos.map(todo => (
        <Todo todo={todo} deleteTodo={deleteTodo} />
      ))}
    </ul>
  );
};

const AddTodo = ({ addTodo }) => {
  const [value, setValue] = useState("");
  const handleSubmit = e => {
    e.preventDefault();
    if (!value) return;
    addTodo(value);
  };

  return (
    <form>
      <input
        type="text"
        value={value}
        onChange={e => setValue(e.target.value)}
      />
      <button onClick={handleSubmit}>Add Todos</button>
    </form>
  );
};

const TodoApp = () => {
  const [todos, setTodos] = useState([
    { id: uuid(), text: "Todo 1", completed: false },
    { id: uuid(), text: "Todo 2", completed: true }
  ]);

  const addTodo = todo => {
    const newTodos = [...todos, { id: uuid(), text: todo, completed: false }];
    setTodos(newTodos);
  };

  const deleteTodo = todoUuid => {
    const newTodos = todos.filter(todo => todo.id !== todoUuid);
    setTodos(newTodos);
  };

  return (
    <div>
      <h2>Todo List</h2>
      <TodoList todos={todos} deleteTodo={deleteTodo} />
      <AddTodo addTodo={addTodo} />
    </div>
  );
};

export default TodoApp;

To init an app:
npx create-react-app todos
cd todos && npm install --save uuid