how can i insert a div with a couple of elements in a array.map?

The idea is to take 2 elements from the array "foods" and insert them in a single div while the "foods.map" is running. here is the code i've been working on:

import React, { useMemo } from 'react';    import { Container } from './styles';    const foods = [    'batata-palha',    'batata palito',    'batata assada',    'batata frita',    'batata-cozida',    'batata batata',  ];    const Dashboard: React.FC = () => {    const automaticHtml = useMemo(() => {      return foods.map((food, index) => (        <>          {/* {index % 2 === 0 && <div>} */}          {index % 2 === 0 && <p>test</p>}          <div>            <p>{food}</p>          </div>          {/* {index % 2 !== 0 && </div>} */}        </>      ));    }, []);      return (      <>        <Container>          <h1>Hello World</h1>          <p>Template</p>          <br />          <br />          {automaticHtml}        </Container>      </>    );  };  export default Dashboard;  

Why if i take the comments out of {/* {index % 2 === 0 && <div>} */} and {/* {index % 2 !== 0 && </div>} */} the code wouldn't work? how can i fix it? I just want to insert two elements of the array in a single div.

I've been with this problem for a while i even created a simple project in my GitHub about it: https://github.com/MestreALMO/Testing_React

https://stackoverflow.com/questions/66926994/how-can-i-insert-a-div-with-a-couple-of-elements-in-a-array-map April 03, 2021 at 09:33AM