React distinct key for a duplicated component

I have a perkProgress prop that is always an integer of 0-3. I am using Ramda's library for their repeat function to triplicate the creation of an Element 'once per' {R.repeat(<CheckCircle key={uid()} />, this.props.perkProgress)}

My issue is I am not sure how to create a 'unique ID' for the key prop. I went to UUID Package for assistance, but I'm still getting the same warning. It's like the uid() is rendering first to a static text, and then .repeat() is triplicating that -exact- value. I've tried Math.random() to test this theory and the same thing happens.

How are you supposed to assign a unique ID to something that is creating a duplicate component?

CodeSandbox - I wasn't able to get uid to work in here, but to show I used Math.random() which you would expect to have different outcomes, but it is the same one each time.

1 answer

  • answered 2018-04-14 16:03 Shubham Khatri

    Its not a good idea to set up Math.random as the React element key since, on every render a new key will be generated an used which will affect react-performance. You could instead use R.range(0, 3) and map over it setting the value as key like

    const App = () => (
      <div style={styles}>
        <Hello name="CodeSandbox" />
        {R.range(0, 3).map(key => <li key={key}>Hi</li>)}
        <h2>Start editing to see some magic happen {"\u2728"}</h2>
      </div>
    );
    

    CodeSandbox

    P.S. repeat memoizes the value and hence you see the same key for every item being generated.