render Multidimensional array react js

Question

how do display the array of the card in two columns instead of one with an image displaying sequentially?

return  (
    <div>
     
      {
        data?.length > 0 && data?.map(item=>{
          return(                
              <div className='home-container'>                    
                <div className='card-image-container'>
                  <img className='card-image'  alt="blank" src={item.photo} />
                </div>
                <div className='card-content'>               
                <h6 className='home-card-title'>{item.title} </h6>
                  <p className='home-card-desc'>{item.body}</p>                    
                </div>
              </div>
            
          )
        })
      }         
     </div>
  );

can someone tell me how to implement a multi-dimensional array in this?

can you give example how do you want it exactly with a demo array variable. — Pankaj Chaturvedi
– Pankaj Chaturvedi, Commented Feb 10, 2022 at 4:07
This sounds more like a css/styling question? do you want to map the data so that it outputs into 2 seperate columns? — jsonderulo
– jsonderulo, Commented Feb 10, 2022 at 4:37

Noob Life · Accepted Answer · 2022-02-10 11:18:26Z

You can try using grid in css

#grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

return  (
    <div id='grid-container'>
     
      {
        data?.length > 0 && data?.map(item=>{
          return(                
              <div className='home-container'>                    
                <div className='card-image-container'>
                  <img className='card-image'  alt="blank" src={item.photo} />
                </div>
                <div className='card-content'>               
                <h6 className='home-card-title'>{item.title} </h6>
                  <p className='home-card-desc'>{item.body}</p>                    
                </div>
              </div>
            
          )
        })
      }         
     </div>
  );

To add padding/styling to the grid, you can check out more options here

Collectives™ on Stack Overflow

render Multidimensional array react js

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