Por ejemplo, id... Quiero -> "ID" en una línea 1, 2, siguiente línea 3, 4 siguiente línea 5, 6 ahora -> una línea 1, 1 siguiente línea 2, 2 siguiente línea 3, 3. ¿Qué tengo que hacer? Por ejemplo, id... Quiero -> "ID" en una línea 1, 2, siguiente línea 3, 4 siguiente línea 5, 6 ahora -> una línea 1, 1 siguiente línea 2, 2 siguiente línea 3, 3. ¿Qué tengo que hacer?
//app.js const [data, setData] = useState([]); useEffect(() => { fetch('http://localhost:3001/data/mainData.json') .then(res => res.json()) .then(data => { setData(data); }); }, []); <ImgContainer> {data.map(imgList => { return ( <ImgBox> <ImgWrap to={`/${imgList.text}`} key={imgList.id}> <Img src={imgList.src} alt={imgList.text} /> <Text>{imgList.text}</Text> </ImgWrap> <ImgWrap to={`/${imgList.text}`} key={imgList.id}> <Img src={imgList.src} alt={imgList.text} /> <Text>{imgList.text}</Text> </ImgWrap> </ImgBox> ); })} </ImgContainer> //json [ { "id": 1, "src": "/images/bathMain.jpg", "text": "Bath" }, { "id": 2, "src": "/images/livingMain.jpg", "text": "Living" }, { "id": 3, "src": "/images/kitchenMain.jpg", "text": "Kitchen" }, { "id": 4, "src": "/images/diningMain.jpg", "text": "Dining" }, { "id": 5, "src": "/images/bedMain.jpg", "text": "Bed Room" }, { "id": 6, "src": "/images/dressMain.jpg", "text": "Dress Room" } ]Una forma de hacer esto sería crear su expresión fuera de la declaración de retorno, usando un bucle for simple:
let val = [ { id: 1, src: "/images/bathMain.jpg", text: "Bath" }, { id: 2, src: "/images/livingMain.jpg", text: "Living" }, { id: 3, src: "/images/kitchenMain.jpg", text: "Kitchen" }, { id: 4, src: "/images/diningMain.jpg", text: "Dining" }, { id: 5, src: "/images/bedMain.jpg", text: "Bed Room" }, { id: 6, src: "/images/dressMain.jpg", text: "Dress Room" } ]; let expr = []; for (let i = 0; i < val.length; i=i+2) { expr.push( <> <p>{val[i].id}</p> <p>{val[i+1].id}</p> </> ); } return <div className="App">{expr}</div>;