/Javascript/React/React-map-multidimensional-array

React-map-multidimensional-array

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")
)

Source: stackoverflow.com

Similar codes

0 vote337 views1 answer
Jest mock react-redux hooks
Javascript React
1 vote364 views1 answer
React native run ios select simulator
Javascript React
1 vote371 views5 answers
Enzyme adapter react 17
Javascript React
0 vote333 views1 answer
Ityped react
Javascript React
0 vote343 views1 answer
When an aqueous solution of AgNO3 is mixed with an aqueous solution of (NH4)2CrO4, a precipitation reaction occurs. For this reaction, a) Write the molecular equation.
Javascript React
15 votes345 views2 answers
React native get location
Javascript React
0 vote351 views1 answer
React sub count
Javascript React
0 vote326 views1 answer
Type '{ GlobalState: any; Dispatch: React.Dispatch<any>; }' is not assignable to type 'null'
Javascript React
0 vote342 views1 answer
Unable to resolve module `@react-native-community/toolbar-android
Javascript React
0 vote352 views1 answer
Remarkable react js
Javascript React