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>
    </>
  );
};

Please `console.log` outside of function. – Sanat Gupta Jun 19 '21 at 05:27 — Sanat Gupta, Jun 19 '21 at 05:27

score 1 · Answer 1 · answered Jun 19 '21 at 05:26

1

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

answered Jun 19 '21 at 05:26

Anglesvar

1,132
8
15

Thank you @Anglesvar for the insight, didn't know about that second parameter of setState. However when I tried to console.log with the callback as second parameter I got an error in the console (Hooks don't support the second callback argument. To execute a side effect after rendering, declare it in the component body with useEffect().), In that case, I tried by just console.log(allTasks) without callback and it works. – Mugi Jun 19 '21 at 05:45

score 1 · Accepted Answer · answered Jun 19 '21 at 05:37

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>
    </>
  );
};

Thank you for your insight and the neat refactoring ! – Mugi Jun 19 '21 at 06:03 — Mugi, Jun 19 '21 at 06:03

ToDo rendering data object

2 Answers2