How to count a map loop?-CodePudding

I want to make bolder the first loop of my table and the rest of them will be normal size. I want to count the map loop and check if it is 1 I will make style={{fontWeight:'bold'}} in tag. How can I do that?

mycode

<table>
...
{categories.map( val =>
                
                    <tr>
                        <td>
                          {val.name}
                        </td>
                        <td>
                          {val.formula}
                        </td>
                        <td>{(val.values[0].value).toLocaleString()}</td>
                        <td>{(val.values[1].value).toLocaleString()}</td>
                        <td>
                          {val.description}
                        </td>
                </tr>)}
</table>

CodePudding user response：

Try this in css.

tr:first-child {
      fontWeight:'bold';
    }

CodePudding user response：

The second argument to map function is the index, you can use that to check the condition.

{categories.map( (val, index) => {
    if(index == 0)
       return ....
    else return ....
  }
)}