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} />
 ))}





    

Answer 1

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>