React SetState not adding new objects to array of objects

Question

This code is supposed to add new tasks to the state and keep the previous objects, past posts on this have lead to the same issue that it just wont be added.

function App() {

    var [tasks, setTasks] = useState([

        {
            id: uuidv4(),
            text: 'Meeting at place',
            specify: 'todo',
        },
        {
            id: uuidv4(),
            text: 'Shopping',
            specify: 'inprogress',

        },
        {
            id: uuidv4(),
            text: 'Appointment',
            specify: 'complete',

        },
    ])

    //Add Task
    const newTask = (text) => {
        const id = uuidv4();
        var specify = 'todo'
        const makeTask = { id, ...text, specify }
        console.log(makeTask)
        console.log([...tasks, makeTask])
        setTasks(tasks => [...tasks, makeTask])
        console.log(tasks)

    }

when I log what's inside the set function it shows all 4 but it doesnt get saved into tasks

My drag and drop function which filters by id works with the predefined object literals but not new added tasks, and instead returns undefined with new tasks.

Edit: useEffect was solution to correctly show my state for those with same issue. My issue was more complex due to react dnd and found solution here React Hooks: Can't access updated useState variable outside useEffect? .

Updating state in react is asynchronous, so the log inside the function will not necessarily reflect the updated state. react docs — Ross
– Ross, Commented Jul 2, 2022 at 19:13
The id of the added task returns undefined when I drag it and drop it into a different component, where as the drag and drop works with the predefined object literals- leading to the idea of not updating the state — 8885os
– 8885os, Commented Jul 2, 2022 at 19:16

Aidin53 · Accepted Answer · 2022-07-02 20:28:05Z

2

React setState hook is executed asynchronously so after updating, you cannot access the updated state in that function. if you want to access to updated tasks, you can use useEffect hook:

const newTask = (text) => {
    const id = uuidv4();
    var specify = 'todo'
    const makeTask = { id, text, specify }
    setTasks(tasks => [...tasks, makeTask])
}


useEffect(() => {
    console.log(tasks);
}, [tasks]);

answered Jul 2, 2022 at 20:28

Aidin53

7631 gold badge6 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

8885os Over a year ago

Thanks, this worked to display that tasks was holding the correct data so that solves that. Though my drag and drop still doesnt recognise the id so it will take some tinkering

elcharitas · Accepted Answer · 2022-07-02 19:16:28Z

You may want to give use-immer a go to handle object/array states.

The useImmer hook behaves the same as useState hook and updates your object states seamlessly.

This is your code below but with useImmer

import { useImmer } from "use-immer";

function App() {
  const [tasks, updateTasks] = useImmer([

        {
            id: uuidv4(),
            text: 'Meeting at place',
            specify: 'todo',
        },
        {
            id: uuidv4(),
            text: 'Shopping',
            specify: 'inprogress',

        },
        {
            id: uuidv4(),
            text: 'Appointment',
            specify: 'complete',

        },
    ])

    //Add Task
    const newTask = (text) => {
        const id = uuidv4();
        const specify = 'todo'
        const makeTask = { id, ...text, specify }
        updateTasks(draft => draft.push(metaTask));
    }
}

Collectives™ on Stack Overflow

React SetState not adding new objects to array of objects

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related