NEOmanceR
@NEOmanceR
Начинающий веб разработчик

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

Подскажите пожалуйста как правильно это сделать или так нельзя ?
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>
	);
}
  • Вопрос задан
  • 52 просмотра
Пригласить эксперта
Ответы на вопрос 1
MaximBredikhin
@MaximBredikhin
Вот так
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>
    );
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы