How do I use a fetch get response more than once?

I want to set both of these values in the state to be used later as variables.

  const [dollarGoal, setDollarGoal] = React.useState(0); 
  const [dollarValue, setDollarValue] = React.useState(0);
  //fetching donation value
  fetch('api', {
      method: 'GET',
    })
    .then(response => response.json())
    .then(r => setDollarValue(r.dollarValue))
    .then(r => setDollarGoal(r.dollarGoal));

But it gives the error:

Property 'dollarGoal' does not exist on type 'void'.

How do I fix this?

Answer

Try this:

  fetch('api', {
      method: 'GET',
    })
    .then(response => response.json())
    .then((r) => {
      setDollarValue(r.dollarValue)
      setDollarGoal(r.dollarGoal)
    });

The last two .then statements need to be combined. By calling .then twice, you’re sending the result of setDollarValue() (a void function) to the next .then, which is not what you want.