Update data from API fetch request with React Hooks?

Question

I'm struggling to find a way to update and manipulate the fetched data. I want the {data.servings} to increase by 1 every time I click the Plus button. Even though the rendered data is a number of servings but it's data type is STRING so I figured a way to assign its value to a variable called portions and convert it to number like below. However, I can't update or manipulate it. Any helps would be appreciated. Thanks in advance!!

const handleData = () => {

  const [data, setData] = useState();

    useEffect(()=>{
      fetch(url)
        .then(res => res.json())
        .then(data => setData())
    },[url])


    const handleIncrement = (e) =>{
      let portions = parseInt(e.currentTarget.previousSibling.innterText)
    }
    return (
      <>
        <Minus />
        //the output of {data.servings} is 2 but it's data type is STRING
        <p>{data.servings}</p>
        <Plus onClick={handleIncrement}/>
      </>
    )
}

Shubham Patil · Accepted Answer · 2021-06-16 18:27:07Z

1

You can try out this handleIncrement function

const handleIncrement = () => {
  let copyData = { ...data };
  copyData.servings = `${parseInt(copyData.servings) + 1}`;
  setData(copyData);
};

answered Jun 16, 2021 at 18:27

Shubham Patil

262 bronze badges

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

Collectives™ on Stack Overflow

Update data from API fetch request with React Hooks?

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