How to integrate array.map in React Js

Question

Here is my Jason data and code that i am using map() for populating my data but getting some error, below is my code

var data = [
  {
    categorytitle: "Shoes",
    category: [
      {
        Category1: "Boots"
      },
      {
        Category2: "Sneakers"
      },
      {
        Category3: "Flats"
      },
      {
        Category4: "Booties"
      },
      {
        Category5: "Mules"
      },
      {
        Category6: "Heels/Pumps"
      },
      {
        Category7: "Clogs"
      },
      {
        Category8: "Slippers"
      },
      {
        Category9: "Sandals"
      },
      {
        Category10: "Sale"
      },
      {
        Category11: "Shop All"
      }
    ]
  }
];

also please find the populating code at below...

{data.map((el, e) => (
                    <div {...el} key={e}>
                      <h3>{el.categorytitle}</h3>
                      <ul>
                        <li>{el.category[e]}</li>
                      </ul>
                    </div>
                  ))}

Please guide me how i can display Category1 .... in list?

@MazharHaque this is error i am getting... Objects are not valid as a React child (found: object with keys {Category1}). If you meant to render a collection of children, use an array instead. — Sanjay Tiwari
– Sanjay Tiwari, Commented Feb 5, 2019 at 20:46

Hemadri Dasari · Accepted Answer · 2019-02-05 20:55:02Z

1

You can do something like below

   {data.map((ele, index) => (
                <div key={"Key-"+index}>
                  <h3>{ele.categorytitle}</h3>
                  <ul>
                    {Array.isArray(ele.category) && ele.category.map((d, i) => (<li key={"Key-"+i}>{d[`Category${i+1}`]}
                    </li>))}
                  </ul>
                </div>
              ))}

edited Feb 5, 2019 at 20:55

answered Feb 5, 2019 at 20:48

Hemadri Dasari

34.2k41 gold badges125 silver badges166 bronze badges

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

Comments

Shivam · Accepted Answer · 2019-02-05 20:52:24Z

0

Try something like this: You need to loop through the category array

data[0].category.map((el, i) => {
    console.log(el['Category' + i++])
    console.log(i)
    return el['Category' + i++];
})

answered Feb 5, 2019 at 20:52

Shivam

3,1414 gold badges32 silver badges46 bronze badges

Comments

Aziz.G · Accepted Answer · 2019-02-05 21:13:32Z

const data = [{
  categorytitle: "Shoes",
  category: [{
      Category1: "Boots"
    },
    {
      Category2: "Sneakers"
    },
    {
      Category3: "Flats"
    },
    {
      Category4: "Booties"
    },
    {
      Category5: "Mules"
    },
    {
      Category6: "Heels/Pumps"
    },
    {
      Category7: "Clogs"
    },
    {
      Category8: "Slippers"
    },
    {
      Category9: "Sandals"
    },
    {
      Category10: "Sale"
    },
    {
      Category11: "Shop All"
    }
  ]
}];

const category = data.forEach(({
  category
}) => {
  Object.values(category).map((value, index) => {
    console.log(value[`Category${index +1 }`]);
  })
});

For React JSX it should be something like :

{data.forEach(({ category }) => {
      Object.values(category).map((value, index) => {
        <span> {value[`Category${index + 1}`]} </span>;
      });
    })}

Collectives™ on Stack Overflow

How to integrate array.map in React Js

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related