React: Render new row every 4th column

Question

I\'m using react and I want to render a new row every 4th column.

My code:

function Product(props) {
  const content = prop         


        

Answer 1

You want to wrap new row for each 4 columns, right?

Try this

render() {
		const products = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
		let rowContents = [];
		const contents = products.reduce((acc, p, i) => {
			rowContents.push(
Col {p}
);
			if (i % 4 === 3) {
				acc.push(
{rowContents}
);
				rowContents = [];
			}
			return acc;
		},[])
       contents.push(
{rowContents}
);

		return (
			

			{contents}
			
		)
	}