How to set object variable inside an array state?

Question

I have a some state like this :

const [tags, setTags] = useState([{id: 1, label: "random"}, {id: 2, label: "important"}])
const [input, setInput] = useState("")
const [selectedTag, setSelectedTag] = useState([])

and below that somewhere i have a function like this :

const addTag = (id: number)=> {
        tags.map(tag => {
            if(tag.id === id){       
                setSelectedTag(tag) // trouble here
            }
        })
    }

I want to push the new selected tag into the state of selectedTags which is an array, how do i push the tag into that array when i can't even access selectedTags state directly?

Amruth · Accepted Answer · 2021-08-05 05:59:29Z

1

You should do this way.

const addTag = (id: number)=> {
        tags.map(tag => {
            if(tag.id === id){       
                setSelectedTag([...selectedTag, tag]);
            }
        })
}

this could be another way to do the same job.

const addTag = (id: number)=> {
  let tag = tags.find(tag => tag.id === id);
  setSelectedTag([...selectedTag, tag]);
}

answered Aug 5, 2021 at 5:59

Amruth

5,9122 gold badges30 silver badges41 bronze badges

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

2 Comments

user16516348 Over a year ago

I'm actually using typescript so im getting Type '{ id: number; label: string; }' is not assignable to type 'never'. error. It says that const selectedTag[] : never EDIT: Fixed it. Just had to add a type to the selectedTag state.

Amruth Over a year ago

stackoverflow.com/questions/52423842/… this should help you

Mustafa ERK · Accepted Answer · 2021-08-05 05:55:15Z

0

Use Array.Filter or Array.find for get selected tag

Example for your code:

const addTag = (id: number)=> {
  const filteredTag =  tags.find(tag => tag.id === id))
   setSelectedTag(filteredTag);
    }

find return object

answered Aug 5, 2021 at 5:55

Mustafa ERK

661 silver badge6 bronze badges

Comments

Neel Dsouza · Accepted Answer · 2021-08-05 05:56:07Z

0

Try this

const addTag = (id: number)=> {
        tags.map(tag => {
            if(tag.id === id){
const tags = [...selectedTag];
tags.push(tag);   
                setSelectedTag(tags);
            }
        })
    }

answered Aug 5, 2021 at 5:56

Neel Dsouza

1,5695 gold badges16 silver badges36 bronze badges

Comments

Anil_M · Accepted Answer · 2021-08-05 06:10:07Z

0

See useState reference at useState hooks API reference

useState does not automatically merge values, However you can mimic it as follows,
Warning : following code is not tested.

const addTag = (id: number)=> {
        tags.map(tag => {
            if(tag.id === id){       
                setSelectedTag([... selectedTag],...[tag])
            }
        })
    }

Edit: In order to have clean code following will work better. Which is basically same as @amruth. Above code will be better useful if you are merging two arrays.

setSelectedTag([... selectedTag, tag])

edited Aug 5, 2021 at 6:10

answered Aug 5, 2021 at 6:02

Anil_M

11.5k6 gold badges56 silver badges76 bronze badges

Collectives™ on Stack Overflow

How to set object variable inside an array state?

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related