React JS: Looping through an array and creating a div each 3 items

Question

Basically, It's a bit hard for me to explain what I'm trying to accomplish. I have a JSON payload which is equal to this:

{
    "user": {
        "id": 4,
        "username": "3nematix2",
        "profile_pic": "http://192.168.0.29:8000/..."
    },
    "id": 47,
    "type": 3,
    "latitude": "10.512055",
    "longitude": "51.512061",
    "type_str": "TRIPOD",
    "status_str": "APPROVED",
    "status_color": "green",
    "attached_message": "testas2",
    "marker_icon": "https://i.imgur.com/VDUPhLx.png",
    "attached_photo": "http://192.168.0.29:8000/..."
}

And I have these cards :

So the thing is that these cards are in the wrapper and the wrapper requires 3 cards to make a full line, if I would map into my payload like this (code below), the line will be full but with the same JSON object from the array. This is what it looks if used the code below:

const ActiveReports = ({title, payload}) => {

    const payloadLength = payload.length;

    return (
        <ReportContainer id="reports">
            <ReportH1>Active Reports</ReportH1>
                { payload.map(report => (
                    <ReportWrapper>
                            <ReportCard>
                                <ReportIcon src={report.marker_icon} />
                                <ReportH2>{report.id}</ReportH2>
                                <ReportP>Officer will perform a Quick search of Valid Driver's License and any signs of Intoxication. </ReportP>
                            </ReportCard>
                        
                            <ReportCard>
                                <ReportIcon src={report.marker_icon} />
                                <ReportH2>{report.id}</ReportH2>
                                <ReportP>Officer will perform a Quick search of Valid Driver's License and any signs of Intoxication. </ReportP>
                            </ReportCard>


                            <ReportCard>
                                <ReportIcon src={report.marker_icon} />
                                <ReportH2>{report.id}</ReportH2>
                                <ReportP>Officer will perform a Quick search of Valid Driver's License and any signs of Intoxication. </ReportP>
                            </ReportCard>
                    </ReportWrapper> 
                )) }
        </ReportContainer>
    )
}

As you can see the elements in one line duplicates with the object which is currently being mapped. What I need is this:

Answer 1

You'll need to group your array of items into groups of 3 using reduce .

Here's an example:

 const GROUP_SIZE = 3; const items = [1, 2, 3, 4, 5, 6, 7, 8, 9]; const groupedItems = items.reduce( (acc, item) => { if (acc[acc.length - 1].length >= 3) { return [...acc, [item]]; } acc[acc.length - 1].push(item); return acc; }, [[]] ); console.log(groupedItems);

You'll then be able to map over the grouped items to render the cards as needed.

const ActiveReports = ({ title, payload }) => {
  const groupedItems = payload.reduce(
    (acc, item) => {
      if (acc[acc.length - 1].length >= 3) {
        return [...acc, [item]];
      }
      acc[acc.length - 1].push(item);
      return acc;
    },
    [[]]
  );

  return (
    <ReportContainer id="reports">
      <ReportH1>Active Reports</ReportH1>
      {groupedItems.map((group) => (
        <ReportWrapper>
          {group.map((report) => (
            <ReportCard>
              <ReportIcon src={report.marker_icon} />
              <ReportH2>{report.id}</ReportH2>
              <ReportP>
                Officer will perform a Quick search of Valid Driver's License
                and any signs of Intoxication.
              </ReportP>
            </ReportCard>
          ))}
        </ReportWrapper>
      ))}
    </ReportContainer>
  );
};

Answer 2

Only use one Report Card for Mapping. Not 3. Right now you have

<ReportCard>
 <ReportIcon src={report.marker_icon} />
 <ReportH2>{report.id}</ReportH2>
 <ReportP>Officer will perform a Quick search of Valid Driver's License and any signs of Intoxication. </ReportP>
</ReportCard>

three times in each block and you call it three times ergo 9 tiles.