Push a new value to nested array in React hooks

Question

I have a function onTagSelected() that updates now a single value for a key inside a object:

const NotesContainer = ({

}) => {
  const [notesDummyData, setNotesDummyData] = useState([
    {
      id: '5',
      title: 'Sauna',
      tag: 'relax',
    },
    {
      id: '7',
      title: 'Finland',
      tag: 'nordics'
    },
  ]);

    const onTagSelected = (selectedTag, itemId) => {
     setNotesDummyData(notesDummyData.map((x) => {
       if (x.id !== itemId) return x;
       return { ...x, tag: selectedTag };
     }));
   };

Now I would like to change the function and be able to take many tags. How should I go about modify the function to push new tag values to the new nested tag: array.

    const [notesDummyData, setNotesDummyData] = useState([
    {
      id: '5',
      title: 'Sauna',
      tag: ['relax', 'wellness']
    },
    {
      id: '7',
      title: 'Finland',
      tag: ['nordics', 'winter']
    },
  ]);


    const onTagSelected = (selectedTag, itemId) => {

    // Push new tag to nested array for specific item -> tag: ['nordics', 'winter', 'selectedTag']

  };

Code Maniac · Accepted Answer · 2019-08-20 10:26:15Z

5

spread the previous tag and add selectedTag to end

just change this

return { ...x, tag: selectedTag };

to

return { ...x, tag: [...x.tag, selectedTag] };

Or

return { ...x, tag: x.tag.concat(selectedTag) };

answered Aug 20, 2019 at 10:26

Code Maniac

37.9k5 gold badges44 silver badges65 bronze badges

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

Comments

Sanatan Chaudhary · Accepted Answer · 2019-08-20 10:30:01Z

1

You can use es6 destructuring to add new items to an array.

  const onTagSelected = (selectedTag, itemId) => {
     setNotesDummyData(notesDummyData.map((x) => {
       if (x.id !== itemId) return x;
       return { ...x, tag: [...x.tag, selectedTag] };
     }));
  }

answered Aug 20, 2019 at 10:30

Sanatan Chaudhary

4045 silver badges13 bronze badges

Collectives™ on Stack Overflow

Push a new value to nested array in React hooks

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related