update an object with useState hook in React-CodePudding

I have an object in board variable

Initial Data:

const [board, setBoard] = useState({
            lanes: [],
        });

//object 

{
                lanes: [
                    {
                        title: 'Bugs',
                        id: 'd83706b0-b252-11ec-8845-ad6b1e4ecd03',
                        cards: [
                            {
                                id: null,
                                title: 'Bug #1',
                                description: 'Can AI make memes',
                            },
                        ],
                    },
                    {
                        title: 'Tests',
                        id: 'd83706b0-b252-11ec-8845-ad6b1e4ecd04',
                        cards: [
                            {
                                id: null,
                                title: 'Test #1',
                                description: 'Can AI make memes',
                            },
                        ],
                    },
                ],
            };

I want to add a new element to the cards array but only to the first element in the lanes array. Other answers seem to point to having to use a callback pattern, but I am quite unfamiliar with this.

Thanks for any help.

CodePudding user response：

As for any modification you want to do on a useState variable, you must use an arrow function inside of the "set" function.

You can do something like that :

setBoard((currentBoard)=> {
    currentBoard.lanes[0].cards = [...currentBoard.lanes[0].cards, whateverCardYouWantToAdd ]
    return {... currentBoard} //necessary to create a new object because else the hook won't be updated
})

CodePudding user response：

Maybe with this.

const addValue = () => {
    let t = [...board];
    t[0].lanes.cards.push({
        id: null,
        title: "Bug #1",
        description: "Can AI make memes"
    });
};