Each child in a list should have a unique "key" prop

Question

I have a const defined with multiple functions that are irrevelant to the question, so am just including a sanitized segment that's relevant. Let me know if I should include anything more.

      return (
        <React.Fragment key={index}>
          <hr className={hrClasses} />
          <span className={spanClasses}>
            {isTrue ? 'x' : index + 1}
          </span>
        </React.Fragment>
      );
    })}
  </div>
);

In the browser, I see the warning:

Warning: Each child in a list should have a unique "key" prop.

Since the hr element doesn't need a unique key prop, how can I get around this error?

I've tried different variations of keys, such as adding key={index} to the hr element and re-labelling the index key as id for the span. I'm not sure what else to try. Any guidance would be much appreciated!

Answer 1

You are not applying the key to the parent Fragment.

You can use <> the same way you’d use any other element except that it doesn’t support keys or attributes. ~ https://reactjs.org/docs/fragments.html#short-syntax

You are using the short syntax of <> which does not support keys. Use:

<React.Fragment key={index}>
      <hr className={styles.hr} />
      <span className={styles.span}>
        {isValidated ? 'x' : index + 1}
      </span>
 <React.Fragment/>