How I can set "key" props when render <th> tag-CodePudding

I know this problem is quite common and there are many similar questions, however I still haven't been able to find a solution to my problem.

I have a props

renderDateTable = () => {
    {
        return (
            <>
                <th className="text-center">Sun </th>
                <th className="text-center" >Mon </th>
                <th className="text-center" >Tue </th>
                <th className="text-center" >Wed </th>
                <th className="text-center" >Thu </th>
                <th className="text-center" >Fri </th>
                <th className="text-center" >Sat </th>
            </>
        ) 
    }
}

And this is how I render it when I have a list of Employee.

<tr>{
employee.map((val, i) => {
    return (
        <>
            {this.renderDateTable()}
        </>
    )
})
}</tr>

So how can I assign it a unique "key" prop?

CodePudding user response：

I think you can use <React.Fragment> instead of <>. So your code should look like this:

<tr>
    {
     employee.map((val, i) => (
     <React.Fragment key={i}>
        {this.renderDateTable()}
     </React.Fragment>
      ))}
</tr>