How to replace the value of an array of objects in React

Question

I have this function that returns an array of objects, every object represent a sticky, what I want is to change the value of "content" everytime I click one of the stickies

  handleStickyEdition = (index) => {
    const { currentStage } = this.props
    const stickies = currentStage.get('stickies')
    const updatedStickies = [...stickies]
    console.log(updatedStickies)
  }

And the result of calling the console.log is this array of objects:

If I do console.log(updatedStickies[index].get('content')) I will get the content of the object I want to change. For example name 3.

How can I replace this content with an empty string? in other words, if I click the object in the position 0, how can I make name 3 equals to ''

@guijob This is incorrect, you are trying to mutate the data inside of props. — Francis Malloch
– Francis Malloch, Commented Mar 6, 2018 at 19:22

Francis Malloch · Accepted Answer · 2018-03-06 02:17:00Z

1

I would suggest using a map like so.

this.setState({
  updatedStickies: this.state.updatedStickes.map(sticky => ({
    ...sticky
    content: sticky.id === idOfStickyWeWantToUpdate ? "" : "content"
  }))
});

I see you are reading stickies from props, I would suggest having a function in your parent component to run the above code which you can call from your child component if need be.

answered Mar 6, 2018 at 2:17

Francis Malloch

1,0941 gold badge9 silver badges21 bronze badges

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

Collectives™ on Stack Overflow

How to replace the value of an array of objects in React

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related