Analysis: Why does an empty element appear at the first index position every time?

Question

Whenever I try to put something into my to-do list, there is always an empty element at the first index. Why does this happen?

const [todoList, setTodoList] = useState([]);
  
  const addToList = (inputText) => {
    if (inputText === "") {
      alert("The list is empty")
    }else{
       setTodoList([inputText, ...todoList])
    }
    console.log(todoList);
  };

  const addList = (inputText) => {
    addToList(inputText);
  };

const [todoList, setTodoList] = useState([]);
  

  const addToList = (inputText) => {
    if (inputText === "") {
      alert("The list is empty")
    }else{
       setTodoList([...todoList, inputText])
    }
    console.log(todoList);
  };

  const addList = (inputText) => {
    addToList(inputText);
  };

I also tried it but it didn’t work

Answer 1

Your

setTodoList([inputText, ...todoList])

Use a closure to get the todoList, so you get the same todoList every time.

You need to do something like this:

setTodoList(todoList => [inputText, ...todoList])