How can I modify one value in an array of objects with setState?

Question

In state I have an array of objects, each with the same properties, different values.

QuoteApp Component:

state = {
    quotes: [
      {
        quoteText: "When you can't find the sunshine, be the sunshine!",
        quoteAuthor: 'Person 1'
      },
      {
        quoteText: 'The grass is greener where you water it',
        quoteAuthor: 'Person 2'
      }
    ]
  }

In another component I am passing a new object to QuoteApp, but now it only has the quoteText property.

This is what I'm passing to QuoteApp:

Object { quoteText: "I am the one who knocks!" }

So how can I use setState to "concat" the new object to the initial object in state (modifying only the QuoteText property and leaving the second intact)?

If you may have multiple quotes by the same author, you're supposed to have an array within quoteText property, then you may push new quote to array that corresponds to necessary author, but you're going to need to pass quoteAuthor as well to know where exactly to add new quote. — Yevhen Horbunkov
– Yevhen Horbunkov, Commented Feb 21, 2020 at 8:26
@YevgenGorbunkov sorry I explained it badly, I don't want to push a new quote to the existing one, just modify the one that is already there - swap the quoteText's value, but keep the quoteAuthor intact — R. K
– R. K, Commented Feb 21, 2020 at 8:45
So, following your logic, which of the two quotes, stored within your state you need to modify with the new quoteText? — Yevhen Horbunkov
– Yevhen Horbunkov, Commented Feb 21, 2020 at 8:48
I could add an unique key to each object to easily target them, perhaps. Dunno what would be the best approach in this situation. — R. K
– R. K, Commented Feb 21, 2020 at 8:54
quoteAuthor may serve as a key if you're not worried there could be couple of Charles Dickens' or a bunch of Benjamin Franklin's — Yevhen Horbunkov
– Yevhen Horbunkov, Commented Feb 21, 2020 at 9:02

Nicolas Menettrier · Accepted Answer · 2020-02-21 09:41:57Z

1

There is one of the way of doing it, map will return a new array with the modified value :

function newQuotesForAuthor(newQuote, author) {
  setState({
    quotes: state.quotes.map(({ quoteAuthor, quoteText }) => {
      if (quoteAuthor === author) {
        return { quoteText: newQuote, quoteAuthor };
      }
      return { quoteText, quoteAuthor };
    }),
  })
}

newQuotesForAuthor('New quote', 'Person 1');

answered Feb 21, 2020 at 9:41

Nicolas Menettrier

1,6991 gold badge16 silver badges34 bronze badges

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

1 Comment

R. K Over a year ago

Wow! Great, thanks a lot, but I'm having problem with passing both quoteText and QuoteAuthor as props to this function, or actually getting the correct values. I'm mapping inside a select tag and returning all options to edit. The option tag has a value attribute which I use to tell the onChange handler what to set as state. The thing is, I don't know how to pass both properties from option tag to setState. Can you maybe take a look at my code? Code: pastebin.com/gbiSyu4a

Collectives™ on Stack Overflow

How can I modify one value in an array of objects with setState?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest