ReactJS Design Pattern ~Empty State Pattern~

・This pattern is providing helpful message or guidance in case lists or contents are empty. Thanks to this approach, UI performance can be improved. And, users can notice what's going on.

import { useState } from "react";

function Empty() {
  return <p>Todos are enpty.</p>;
}

function App() {
  const [todos, setTodos] = useState([]);

  const addTodo = () => {
    setTodos([...todos, `Todo ${todos.length + 1}`]);
  };

  const clearTodos = () => {
    setTodos([]);
  };

  return (
    <div>
      <button onClick={addTodo}>Add Todos</button>
      <button onClick={clearTodos}>Clear All Todos</button>

      <div>
        {todos.length === 0 ? <Empty/> :  <ul>
          {todos.map((todo, index) => (
            <li key={index}>{todo}</li>
          ))}
        </ul>}

      </div>
    </div>
  );
}

export default App;