How to add object to array that is located inside of another array using useState - react native

Question

I am wondering how do I push an object to an array that is located inside to another array, using useState. below is my code:

import React, {useState} from 'react';

const Context = React.createContext();

export const Provider = ({children}) =>{

  const [categories, setCategory] = useState([
    { title: 'Personal' , id: Math.floor(Math.random()* 99999), notes: [
      { noteTitle: 'stam', 
        noteContent: 'stamstamstam',
        id: Math.floor(Math.random()* 99999)
      },
      { noteTitle: 'stam2',
        noteContent: 'stamstamstam232323',
        id: Math.floor(Math.random()* 99999)
      }
    ]},
    { title: 'Work' , id: Math.floor(Math.random()* 99999), notes: []},
    { title: 'Shopping' , id: Math.floor(Math.random()* 99999), notes: []}
  ]);

  const addNoteForCategory = (name, content, categoryId) => {
    const chosenCategory = categories.find((category) => category.id === categoryId)  
    setCategory([...chosenCategory.notes, {
      noteTitle: name, 
      noteContent: content, 
      id: Math.floor(Math.random()* 99999)
    }])
  }

}

Andrei Olar · Accepted Answer · 2020-02-12 17:42:32Z

2

You could use map and change the item you want to change, then update the state.

const updatedCategories = categories.map(category => {
    if (category.id === 123) {
        return {
            ...category,
            notes: [
                ...category.notes,
                { title: 'Note 2' }
            ]
        }
    }

    return category;
});

setCategory(updatedCategories);

You need to replace the dummy ids and data that I used with your specific data.

answered Feb 12, 2020 at 17:42

Andrei Olar

2,3681 gold badge18 silver badges37 bronze badges

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

Comments

rMonteiro · Accepted Answer · 2020-02-12 17:34:01Z

0

const addNoteForCategory = (name, content, categoryId) => {
      setCategory( prevState => {
        const chosenCategory = prevState.find((category) => category.id === categoryId);
        chosenCategory.notes.push({
          noteTitle: name, 
          noteContent: content, 
          id: Math.floor(Math.random()* 99999)
        });
        return prevState
    });

  }

answered Feb 12, 2020 at 17:34

rMonteiro

1,7241 gold badge17 silver badges42 bronze badges

Collectives™ on Stack Overflow

How to add object to array that is located inside of another array using useState - react native

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related