Update part of the state using react hooks

Question

I have an event handler and every time I click it, my app crashes. The issue is relative to the part after the Else statement. What I want to achieve is : I have a page with 3 buttons once clicked 1 button it adds an object inside the state array and sends the user to the next page where he has other buttons with the same functionality. I want to, if the user clicks “Back” in the browser and clicks again on the button, to overwrite the price of the object relative to that page. I don’t know how to express myself better, sorry.

`import React, { useContext } from "react";
import { PagesContext } from "../model/PagesContext";
import {
  MainWrapper,
  MainText,
  ButtonsWrapper,
  Icon,
  SelectionsContainer,
  ButtonLabel
} from "../StyledComponents";

const Choices = ({ pagename, values }) => {
  const [price, setPrice, history] = useContext(PagesContext);
  const checker = price.some(item => item.url === history.location.pathname);
  const AddPrice = e => {
    values.forEach(element => {
      if (element.id === e.target.id && !checker) {
        setPrice([
          ...price,
          { price: element.price, url: history.location.pathname }
        ]);
        history.push(element.next);
      } else {
        setPrice(
          price.forEach(obj => {
            if (checker && element.id === e.target.id) {
              obj.price = element.price;
            }
          })
        );
        history.push(element.next);
      }
    });
  };
  return (
    <MainWrapper>
      <MainText>{pagename}</MainText>
      <ButtonsWrapper>
        {values.map(button => (
          <SelectionsContainer key={button.id}>
            <Icon
              onClick={AddPrice}
              src={"/svg-icons/" + button.icon}
              id={button.id}
              style={{ width: "100px", height: "100px" }}
            />
            <ButtonLabel>{button.name}</ButtonLabel>
          </SelectionsContainer>
        ))}
      </ButtonsWrapper>
    </MainWrapper>
  );
};
export default Choices;
`

The question and description do not relate. Please better describe the problem and what you want to achieve. — Abido, Nov 14 '19 at 16:53
Does this answer your question? [Whats the best way to update an object in an array in ReactJS?](https://stackoverflow.com/questions/28121272/whats-the-best-way-to-update-an-object-in-an-array-in-reactjs) — Emile Bergeron, Nov 14 '19 at 16:54
@EmileBergeron unfortunately not completely, I already checked it — iDome89, Nov 14 '19 at 17:00

cbdeveloper · Accepted Answer · 2019-11-14T17:00:31.673

You're updating the state with some new state value that depends on the old one, you should defnitely use this:

setState((prevState) => {
  // Do whatever you need to the last state
  // Just make sure to return a new reference (replace). 
  // Don't send back the same object reference 
  // One example, could be:
  return({
    ...prevState,
    [prop]: updateSomething
  });
});

Don't do this:

setPrice(
 price.forEach(obj => {
  if (checker && element.id === e.target.id) {
    obj.price = element.price;
  }
  })
);

Update part of the state using react hooks

1 Answers1