ToDo rendering data object

Question

I was just testing around building a dummy todo list and was trying to figure out something. While setting the new state with the new task object that includes an id and a text. Well everything works well just my issue when I console.log(allTasks) it starts only to show the array of data after I have added the second task ?

const SearchInput = () => {
  const [taskValue, setTaskValue] = useState("");
  const [allTasks, setAllTasks] = useState([]);

  const handleChange = (e) => {
    setTaskValue(e.target.value);
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    if (taskValue !== "") {
      setAllTasks([
        ...allTasks,
        { id: allTasks.length + 1, text: taskValue.trim() },
      ]);
    }
    setTaskValue("");
    console.log(allTasks);
  };

  return (
    <>
      <Form onSubmit={handleSubmit}>
        <input
          type="text"
          placeholder="Add a task..."
          value={taskValue}
          onChange={handleChange}
        />
        <button>Submit the Task</button>
      </Form>
      <div>
        {allTasks.length <= 0 ? (
          <p>No tasks</p>
        ) : (
          <ul>
            {allTasks.map((task) => (
              <li key={task.id}> {task.text} </li>
            ))}
          </ul>
        )}
      </div>
    </>
  );
};

Answer 1

Here you get updated value and there is a conditional change I hope you will like.

Thanks

const SearchInput = () => {

  const [taskValue, setTaskValue] = React.useState("");
  const [allTasks, setAllTasks] = React.useState([]);

  const handleChange = (e) => {
    setTaskValue(e.target.value);
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    if (taskValue !== "") {
      setAllTasks([
        ...allTasks,
        { id: allTasks.length + 1, text: taskValue.trim() },
      ]);
    }
    setTaskValue("");
 
  };
  console.log(allTasks);

  return (
    <>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          placeholder="Add a task..."
          value={taskValue}
          onChange={handleChange}
        />
        <button>Submit the Task</button>
      </form>
      <div>
        {!allTasks.length && <p>No tasks</p>}
        {!!allTasks.length && 
          <ul>
            {allTasks.map((task) => (
              <li key={task.id}> {task.text} </li>
            ))}
          </ul>
        }
      </div>
    </>
  );
};

Answer 2

According to the docs, setState is async in nature, which means it will execute only after execution of all synchronous code. And setState takes a callback as the second parameter which you can use to log it as expected.

setAllTasks([
        ...allTasks,
        { id: allTasks.length + 1, text: taskValue.trim() },
      ], ()=>{
       console.log(alltasks)
});

Reference