How to store multiple values in useState of API response?

Question

I'm calling a API with another API.

First API have list like a labels:

{
    "body": [
        {
            "label": "label one",
            "inputVal": "input value one"
        },
        {
            "label": "label two",
            "inputVal": "input value two"
        }
    ]
}

Second API will validate each label and input as we are using in first API:

So I'm calling the second API at least twice, because I need to validate two label and input as in first API.

const [inputVal, setInputVal] = useState([]);

async function firstApi() {
    axios
      .post('first_api_url', {
        title: "title",
      })
      .then((res) => {
        if (res) {
          res.data.body.forEach((val) => {
            secondApi();
          });
        }
      });
  }

async function secondApi() {
    axios
      .post('second_api_url', {
        titleSecondApi: "titleSecondApi",
      })
      .then((res) => {
       if (res.data.body.msg) {
          setInputVal([res.data.body.msg]);
          console.log(inputVal);
        }
      });
}

Now I'm getting second API response only last response but I need all response in an array.

I'm using inputVal useState for that but not getting all the values in array. How to get it?

how does the response from second API looks as ?

KcH
– KcH

2022-11-04 07:08:28 +00:00
Commented Nov 4, 2022 at 7:08 — KcH
– KcH, Commented Nov 4, 2022 at 7:08

vighnesh153 · Accepted Answer · 2022-11-04 07:06:00Z

2

Currently, you are over-writing your state with a new array. You need to preserve your previous responses. To do that, you need to update your setter in the second API's then block like the following:

setInputVal(previous => [...previous, res.data.body.msg]);

You can learn more about spreading in javascript arrays here.

answered Nov 4, 2022 at 7:06

vighnesh153

5,5103 gold badges26 silver badges46 bronze badges

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

Comments

mikenlanggio · Accepted Answer · 2022-11-04 07:06:37Z

1

If I got your point correctly, you may try to change your code like that:

const [inputVal, setInputVal] = useState([]);

async function firstApi() {
    axios
      .post('first_api_url', {
        title: "title",
      })
      .then((res) => {
        if (res) {
          res.data.body.forEach((val) => {
            secondApi();
          });
        }
      });
  }

async function secondApi() {
    axios
      .post('second_api_url', {
        titleSecondApi: "titleSecondApi",
      })
      .then((res) => {
       if (res.data.body.msg) {
          setInputVal(prev=> {
            return [...prev, res.data.body.msg]
          });
          console.log(inputVal);
        }
      });
}

answered Nov 4, 2022 at 7:06

mikenlanggio

1,1371 gold badge12 silver badges34 bronze badges

Collectives™ on Stack Overflow

How to store multiple values in useState of API response?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related