For example, id... I want -> "ID" in one line 1, 2, next line 3, 4 next line 5, 6 now -> one line 1, 1 next line 2, 2 next line 3, 3. What should I do? For example, id... I want -> "ID" in one line 1, 2, next line 3, 4 next line 5, 6 now -> one line 1, 1 next line 2, 2 next line 3, 3. What should I do?
//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"
}
]
One way to do this would be to create your expression outside the returns statement, using a simple for loop :
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>;