Insert counter in .map() for react jsx

Question

I need to map through two different arrays adding them as rows to a single table. To do this I am attempting to use a counter instead of index (since react requires a unique key per iteration). I can't use index for the key because I have to concatenate and that makes the indexes not unique per row. So instead, I am attempting with a counter but am getting stuck on how I should increment the number...

...
    {dateTable.categories.map((category, indexThree, categories) =>
      {
        let rowCounter = 0;
        const firstRows = category.firstRows.map((row, indexFour, firstRowsArr) =>
          <tr key={indexFour}>
            {indexFour === 0 ?
            <td>
                <h5>{category.name}</h5>
            </td> : <td />
            }
            <td>{row.valOne}</td>
            <td style={{backgroundColor: "#ffedbc"}}>{row.valTwo}</td>
            <td>{row.valThree}</td>
            <td>{row.valFour}</td>
          </tr>
        );
        const secondRows = category.secondRows.map((row, indexFive, secondRowsArr) =>
        <tr key={indexFive+rowCounter}>
          {indexFive === 0 && category.firstRows.length === 0 ?
          <td>
              <h5>{category.name}</h5>
          </td> : <td />
          }
          <td>{row.valOne}</td>
          <td>{row.valTwo}</td>
          <td>{row.valThree}</td>
          <td>{row.valFour}</td>
        </tr>
        );
        console.log("rowCounter", rowCounter);
        return firstRows.concat(secondRows);
      }
    )}
...

The key is a string. You can just use both indices joined with a separator. Or you can create a single flat array first and then map over that single array. — Sulthan
– Sulthan, Commented Sep 22, 2020 at 16:55

Gabriele Petrioli · Accepted Answer · 2020-09-22 17:32:57Z

1

You could just use

<tr key={rowCounter++}>

for both.

But if you are not going to use this for an arbitrary number of categories, you should just drop the counter and prepend a different string for each array, along with its index.

<tr key={`first-${indexFour}`}>

and

<tr key={`second-${indexFive}`}>

But the best would be if you had a unique key for reach row, so you could do

<tr key={row.someUniqueKey}>

edited Sep 22, 2020 at 17:32

answered Sep 22, 2020 at 17:02

Gabriele Petrioli

197k35 gold badges275 silver badges331 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Fiddle Freak Over a year ago

Thx, this actually answers the question.

Besufkad Menji · Accepted Answer · 2020-09-22 17:00:07Z

1

you can add the firstArray length on the secondArray index, without counter

<tr key={indexFive + firstRows.length}>

answered Sep 22, 2020 at 17:00

Besufkad Menji

1,58813 silver badges13 bronze badges

1 Comment

Fiddle Freak Over a year ago

This works perfectly. I should have thought of that, but probably just need rest. Thanks so much!!!

Collectives™ on Stack Overflow

Insert counter in .map() for react jsx

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related