question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

"Shorthand fragment syntax does support providing keys" when it does not

See original GitHub issue
{[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.

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

6reactions
kaykayehnncommented, Aug 1, 2019

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.

2reactions
JonnyBurgercommented, Aug 1, 2019

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

"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...
Read more >
React v16.2.0: Improved Support for Fragments
Keyed Fragments​​ Note that the <></> syntax does not accept attributes, including keys. key is the only attribute that can be passed to...
Read more >
Can I add a key prop to a React fragment? - Stack Overflow
Yes, you can add a key in the below form Fragment which is not possible in the shorter version of Fragments(i.e, <></>)
Read more >
<> vs React.Fragment - this vs that
The only difference between them is that the shorthand version does not support the key attribute. Here is a common example that inserts...
Read more >
React Fragments: A Simple Syntax to Improve Performance
React fragments provide a simple syntax to group a list of HTML ... how long they've been part of React, they can no...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found