How to properly display data in React using map()?

Question

React

Please tell me how to do it right or not?

let data = [
  {
    box: [
      {box: <div className="box"></div>, status: 'show'},
      {box: <div className="box"></div>, status: 'show'},
      {box: <div className="box"></div>, status: 'show'}
    ]
  },
  {
    box: [
      {box: <div className="box"></div>, status: 'show'},
      {box: <div className="box"></div>, status: 'show'},
      {box: <div className="box"></div>, status: 'show'}
    ]
  }
]



const App = (props) => {
  return (
    <div className="grid">
      {data.map((item)=>{
        return (
          <div className='card'>
            {item.box.map((items2)=>{
              {items2.box}
            })}
          </div>
        )
      })}
    </div>
  );
}

Answer 1

Like this

const App = () => {
  const [items] = React.useState([
    { boxId: 0, id: 0, status: 'show' }, 
    { boxId: 0, id: 1, status: 'show' }, 
    { boxId: 1, id: 2, status: 'hue-moe' }
  ]);
  const [boxes] = React.useState([
    { id: 0 },
    { id: 1 }
  ]);

  return (
    <div className="grid">
      {boxes.map(({ id }) => 
        <ul className="box" key={id}>
          {items.filter(({ boxId }) => boxId === id)
            .map(({ id, status }) => <li key={id}>{status} {id}</li>)}
          </ul>)}
    </div>
    );
}