Eslint-plugin-react: "Shorthand fragment syntax does support providing keys" when it does not

[JonnyBurger]

{[0, 1, 2, 3].map(key => {
   <>
       <div>{key}</div>
   </>
})}

error Missing "key" prop for element in iterator. Shorthand fragment syntax does support providing keys

It says the shorthand fragment syntax does support keys, but I think it does not support it, or does it?

Asking if this is a typo.

[ljharb]

It does, afaik - the purpose of fragment syntax is to avoid the need for a key on the children, not on the fragment itself.

[JonnyBurger]

Ok, then how do we use it?

< key={1}></>

does not work. To clarify my question, the shorthand fragment syntax in my understanding is <> while the regular syntax is <Fragment></Fragment>.

[ljharb]

hmm, that is a good point. #2316 added this; cc @kaykayehnn - it does seem like perhaps the error message has a typo, because there’s no tests with shorthand syntax and a key.

[kaykayehnn]

Whoops, this is a typo - shorthand fragment syntax does not support providing keys. Passing keys to fragments is only supported with the regular syntax: <Fragment key={1}></Fragment>

I'll make a PR to fix this and update the docs.

[JonnyBurger]

Wonderful! Thanks a lot for your effort - This plugin is mindblowing! 💙