How to Store and Update then again store in useState

I’m using here useState to store data, update current value, by using this it’s not store previous data, it’s only store update current value which do useState. But I want to store previous data and update data all of them, somethings like, i have 10 api’s data and i want to call them end of my api using ids.

i want to store 10 api’s data in one array.

how to store 10 apis data in together using useState();

my code is somethings like:

const [dataLoc, setDataLoc] = useState([]); 
const ids = [1,2,3,4,5,6,7,8,9,10]
useEffect(() => {
        ids?.map((id) => {
            fetch(`https://jsonplaceholder.typicode.com/posts/${id}`)
                .then((response) => response.json())
                .then((dataLoc) => setDataLoc(dataLoc.title))
                .catch((error) => console.error(error))
        })
    }, []);

    console.log(dataLoc);

output is:

enter image description here

but it’s in 10 array the out put but i want all the title in one array.

anyone can help me how can i do this here? ThankYou for Your Trying in advance!

Answer

You can make use of react states prev-callback like that:

const [dataLoc, setDataLoc] = useState([]);

useEffect(() => {
  ids?.map((id) => {
    fetch(`https://jsonplaceholder.typicode.com/posts/${id}`)
      .then((response) => response.json())
      .then((dataLoc) => setDataLoc((prev) => [...prev, dataLoc.title]))
      .catch((error) => console.error(error));
  });
}, []);

console.log(dataLoc);

By spreading ...prev and appending it with , dataLoc.title you add each entry to the previous state value. The order is the one in which the calls go through, since we insert the new element at the end.

Edit

If you want to console.log multiple times you can make use of another useEffect inside your component:

useEffect(() => {
  console.log(dataLoc);
}, [dataLoc]);