How to map through an array, which has an array of multiple objects?

Question

I have called an api which gives me somewhat of a response like this,

manufacturers: [{,…}, {,…}, {,…}, {,…}, {,…}, {,…}, {,…}, {,…}, {,…}, {,…}]
0: {,…}
1: {,…}
2: {,…}
3: {,…}
4: {,…}
5: {,…}
6: {,…}
7: {,…}
8: {,…}
9: {,…}

then I stored this in an array, which is like this (in console this gives me a single element array, which has an array of 10 elements ):

const arrOfProducts = [];

  axios
      .get(url)
      .then((response) => {
        arrOfProducts.push(response.data.result.manufacturers);
        console.log(arrOfProducts); //in console this gives me a single element array, which has an array of 10 elements 
      })
      .catch((error) => {
        console.log(error);
      });

Then I tried to map it in my React component Like this:

<Box
      display='flex'
      flexDirection='row'
      alignItems='center'
      justifyContent='space-evenly'
    >
      {arrOfProducts.map((items,index)=>{
        return <Box key={index}>{items.city}</Box>  //it has multiple keys like city,name etc
      })}
    </Box>

which doesn't render anything. Please tell me what I am doing wrong. Also please can suggest a better approach than this to store an api.

console the items before the return statement in the map method — Ridwan Ajibola
– Ridwan Ajibola, Commented Feb 10, 2022 at 4:52

Dipak · Accepted Answer · 2022-02-10 04:57:43Z

2

Use react useState / setState for this

function ProductList() {
  const [arrOfProducts, setArrOfProducts] = useState([]);
  
  useEffect(() => {
    axios.get("products").then(list => {
        setArrOfProducts([...arrOfProducts, ...list]);
    })
  })
}

answered Feb 10, 2022 at 4:57

Dipak

7,0128 gold badges71 silver badges97 bronze badges

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

Comments

Ibrahim Azhar Armar · Accepted Answer · 2022-02-10 04:54:54Z

1

You need to use state to rerender the component, just pushing to the array will not re-render

do it like this if you are using functional component

import React, { useState, useEffect } from 'react';

const [item, setItems] = useState([]);

// Wrap api request in useEffect to make sure it only run once
useEffect(() => {
    axios.get(url).then((response) => {
        setItems(existingItems => [...existingItems, response.data.result.manufacturers]);
    })
    .catch((error) => {
        console.log(error);
    });
}, []);

// Render
<Box
    display='flex'
    flexDirection='row'
    alignItems='center'
    justifyContent='space-evenly'
>
    {items.map((item,index)=>{
        return <Box key={index}>{item.city}</Box> 
    })}
</Box>

answered Feb 10, 2022 at 4:54

Ibrahim Azhar Armar

25.8k36 gold badges136 silver badges213 bronze badges

1 Comment

tanjim anim Over a year ago

thanks man that did the job. feeling so stupid not to think about using useState.

CertainPerformance · Accepted Answer · 2022-02-10 04:53:55Z

1

You are creating a wrapper array around the response unnecessarily, which is causing your confusion. The plain array of objects and nothing else is present in the response, so just use that.

Since you're in React, you should also be using a state setter. Something like:

const [products, setProducts] = useState([]);

useEffect(() => {
    axios
        .get(url)
        .then((response) => {
            setProducts(response.data.result.manufacturers);
        })
        .catch((error) => {
            console.log(error);
        });
}, []);

You don't need to also .push the result to another array.

answered Feb 10, 2022 at 4:53

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

Collectives™ on Stack Overflow

How to map through an array, which has an array of multiple objects?

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related