index with lodash times method-CodePudding

I need to replicate a component "n" times. To do that I used lodash method times. The problem is that I need an index as a key for the components generated an It doesn't look like it has one.

I have the following code:

export const MyComponent: React.FC<{
  times: number;
}> = ({ times }) => {
  return (
    <>
      {_.times(times, () => (
        //I need a key={index} in this div
        <div className="bg-white border-4 border-white md:rounded-md md:p-2 content-center my-4 shadow w-full">
        </div>
      ))}
    </>
  );
};

This will return the component that is inside n times.

I tried to do a method that returns the component and set an index with useState, but it goes in infinite loop. I thought to put a big random number as key so it is extremely difficult to get the same, but I don't like that solution. I'd like to use this method because it is clean.

So what do you think I could do to give a to the component?

CodePudding user response：

It's passed to you as a function parameter:

_.times(times, (index) => (blabla))