Как правильно вывести даные в React через map()?

Question

[Alex Krynytskyi]

Подскажите пожалуйста как правильно это сделать или так нельзя ?

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

Comments

[alex4answ]

можно, но нужно указать key

[Алексей Уколов]

Что конкретно вас смущает-то?

Answer 1

[Maxim Bredikhin]

Вот так

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