使用 useState 和 React 的 TodoList - 更新 todoList 的问题

Question

I have a problem updating my todoList using React and useState... Should I try using "push" or something different to update my list?

thank you very much !!

import React, { useState } from "react";

const App = () => {
  // State search et sa fonction de modification
  const [search, setSearch] = useState("");
  const updateSearch = (e) => {
    setSearch(e.target.value);
    console.log(search);
  };
  // State de liste et sa fonction de modification
  const [list, setList] = useState([]);
  const updateList = () => {
    setList([...list, search]);
  };

  return (
    <div>
      <h1>Welcome on your todolist</h1>
      <br />
      <input type="text" onChange={updateSearch} value={search} />
      <button onClick={updateList}>enter</button>
      <ul></ul>
    </div>
  );
};

export default App;

Answer 1

I will rephrase my question: I worked on my code again and everything seems to work but when I console log the array list, the array first array is always empty...

import React, { useState } from "react";

const App = () => {
  // State search et sa fonction de modification
  const [search, setSearch] = useState("");
  const updateSearch = (e) => {
    setSearch(e.target.value);
    console.log(search);
  };
  // State de liste et sa fonction de modification
  const [list, setList] = useState([]);
  const updateList = () => {
    setList([...list, search]);
    setSearch("");
    console.log(list);
  };

  return (
    <div>
      <h1>Welcome on your todolist</h1>
      <br />
      <input type="text" onChange={updateSearch} value={search} />
      <button onClick={updateList}>enter</button>
      <h1>what is inside of list : {list}</h1>

      <ul>
        {list.map((item) => (
          <li>{item}</li>
        ))}
      </ul>
    </div>
  );
};

export default App;

Answer 2

it's because useState is asynchronous, if you want to log the state after updating it you can use useEffect hook with list as a dependency
Also I would like recommend adding a key to each element of your list, a quick way to do it is to use the array index, like this:

 {list.map((item,index) => (
          <li key={index}>{item}</li>
        ))}

But it will be better to have your list as a list of object [value,id] and generate an uuid() when you add items to your list