React map() multidimensional array

Question

how to map thorugh a multidimantional array in react?. this method is working fine with a simple but the output is not showing with this type of array. there is no error message as well.

two 'category' divs appear in the page but they are empty the content is not showing.my desired out come is:

<div className="category">
        <h3>Gadgets</h3>
        <a href={`/categorypage`} className='sub-category'>
            <img src='/assets/images/iphone.png' alt="" />
            <p className='name'>iphone</p>
        </a>
        <a href={`/categorypage`} className='sub-category'>
            <img src='/assets/images/samsung.jpg' alt="" />
            <p className='name'>samsung</p>
        </a>
    </div>

    <div className="category">
        <h3>Books</h3>
        <a href={`/categorypage`} className='sub-category'>
            <img src='/assets/images/book-1.jpg' alt="" />
            <p className='name'>Fiction</p>
        </a>
        <a href={`/categorypage`} className='sub-category'>
            <img src='/assets/images/book-2.jpg' alt="" />
            <p className='name'>education</p>
        </a>
    </div>

array:

const Categories = [
{
    'Gadgets': [
        {
            'name': 'iphone',
            'image': '/assets/images/iphone.png',
        },
        {
            'name': 'samsung',
            'image': '/assets/images/samsung.jpg',
        },
    ]
},
{
    'Books': [
        {
            'name': 'Fiction',
            'image': '/assets/images/book-1.jpg',
        },
        {
            'name': 'education',
            'image': '/assets/images/book-2.jpg',
        },
    ]
}

]

export default Categories

category.js:

function Category({ category }) {
return (
    <div className="category">
        <h3>{category.category}</h3>
        <a href={`/categorypage`} className='sub-category'>
            <img src={category.image} alt="" />
            <p className='name'>{category.name}</p>
        </a>
    </div>
)

}

app.js:

{Categories.map((category, i) => (
    <Category category={category} />
 ))}

Hassan Imam · Accepted Answer · 2021-06-19 14:03:04Z

You have an array of objects. When you iterate through categories, you get an object of category. You have to extract the key and values using Object.entries() and then use array#map to show all values inside it.

const { useState, Fragment } = React;

function Category({ category }) {
  return (
    <div className="category">
      {
        Object.entries(category).map(([categoryName, values]) => {
         return (
            <Fragment>
            <h3>{categoryName}</h3>
            <Fragment>
            {values.map(({image, name}) => (
                <Fragment>
                <a href={`/categorypage`} className='sub-category'>
                    <img src={image} alt="" />
                    <p className='name'>{name}</p>
                </a>
                </Fragment>
            ))}
            </Fragment>
            </Fragment>
          )
        })
      }
    </div>
  )
}

const App = () => {
  const categories = [{ 'Gadgets': [ { 'name': 'iphone', 'image': '/assets/images/iphone.png', }, { 'name': 'samsung', 'image': '/assets/images/samsung.jpg', }, ] }, { 'Books': [ { 'name': 'Fiction', 'image': '/assets/images/book-1.jpg', }, { 'name': 'education', 'image': '/assets/images/book-2.jpg', }, ] }];

  return (
    <Fragment>
      {categories.map((category) => (<Category category={category} />))}
    </Fragment>)
}

ReactDOM.render(
  <App />,
  document.getElementById("root")
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Collectives™ on Stack Overflow

React map() multidimensional array

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related