How to display data from JSON as flex row in div ReactJS - reactjs

Question

Here is my code. I want to display data from JSON file as flex-row in div. But what I got is column. I use tailwind to display it as flex-row. Here is the expected output: https://i.stack.imgur.com/f8uAp.jpg
import React, { Component } from "react";
import PostData from "../data/data.json";
class Sneaker extends Component {
state = {};
render() {
return (
<div>
{PostData.map((postDetail) => {
return (
<div className="flex flex-row bg-gray-400 w-2/3 mx-auto mt-10">
<div className="text-center w-1/4 p-2 m-2 bg-white">
<img className="w-64 h-64" src={postDetail.image} alt="" />
<h1>{postDetail.name}</h1>
<h1 className="text-red-500">${postDetail.price}</h1>
</div>
</div>
);
})}
</div>
);
}
}
export default Sneaker;

Answer 1

Try to put the postData loop inside the flex-row div as below
<div className="flex flex-row bg-gray-400 w-2/3 mx-auto mt-10">
{PostData.map((postDetail) => {
return (
<div className="text-center w-1/4 p-2 m-2 bg-white">
<img className="w-64 h-64" src={postDetail.image} alt="" />
<h1>{postDetail.name}</h1>
<h1 className="text-red-500">${postDetail.price}</h1>
</div>
);
})}
</div>

Answer 2

If you want put 3 items in a flex row you can write code like this:
import React, { Component } from "react";
import PostData from "../data/data.json";
const perRow = 3;
class Sneaker extends Component {
state = {};
render() {
return (
<div>
{PostData.map((ignoreIt, i) => {
return i % perRow === 0 ? (
<div
className="flex flex-row bg-gray-400 w-2/3 mx-auto mt-10"
key={i}
>
{PostData.slice(i, i + perRow).map((postDetail, j) => {
return (
<div
className="text-center w-1/4 p-2 m-2 bg-white"
key={i + j}
>
<img className="w-64 h-64" src={postDetail.image} alt="" />
<h1>{postDetail.name}</h1>
<h1>{j}</h1>
<h1 className="text-red-500">${postDetail.price}</h1>
</div>
);
})}
</div>
) : null;
})}
</div>
);
}
}
export default Sneaker;