Warn if an element that likely requires a key
prop--namely, one present in an
array literal or an arrow function expression.
Examples of incorrect code for this rule:
[<Hello />, <Hello />, <Hello />];
data.map(x => <Hello>{x}</Hello>);
<Hello {...{ key: id, id, caption }} />
In the last example the key is being spread, which is currently possible, but discouraged in favor of the statically provided key.
Examples of correct code for this rule:
[<Hello key="first" />, <Hello key="second" />, <Hello key="third" />];
data.map((x, i) => <Hello key={i}>{x}</Hello>);
<Hello key={id} {...{ id, caption }} />
...
"react/jsx-key": [<enabled>, { "checkFragmentShorthand": <boolean> }]
...
When true
the rule will check if usage of the shorthand fragment syntax requires a key. This option was added to avoid a breaking change and will be the default in the next major version.
Examples of incorrect code for this rule:
[<></>, <></>, <></>];
data.map(x => <>{x}</>);
When true
the rule will check if key prop after spread to avoid createElement fallback.
Examples of incorrect code for this rule:
<span {...spread} key={"key-after-spread"} />;
If you are not using JSX then you can disable this rule.
Also, if you have some prevalent situation where you use arrow functions to return JSX that will not be held in an iterable, you may want to disable this rule.