Part of the JSX syntax is that adjacent JSX elements are wrapped in an enclosing tag. That is, a JSX expression must have only one outermost elemen...
For further actions, you may consider blocking this person and/or reporting abuse
Hi Sarah,
Great post. I never thought of doing an
Inputcomponent before, so that was also a great addition skill beyond the Fragment explanation too.Also I think if you look you see two things, one I believe is an error and the second is what I believe to be a best practice for usability.
Your second last example uses
propsnotthis, yet it's a Class declaration. What's tongue-in-cheek cute about the oversight is that you caught it on your next example and usedthis.I believe Labels should enclose the input tag for usability reasons. Which if I'm right then it means that extra
isn't necessary.Regardless even if I'm right about any of those this was as I've said an awesome and easy to follow Fragment article. I've read a few as I try to process and learn to develop better with React and yours is good.
Have a great week!
Thanks Roger, I'm glad you like the post. Thanks also for pointing out the error. I used the input field solely for an explanation. Should use a better example next time.
Oh my no it was great. I'm just in the early stages of learning React so for me I loved your Input component and I was serious about replicating it in some form in my own work. I recognize you it's just an 'example', but does that also mean making each input into a component as you've done isn't a good idea?
Btw I tried to use your lesson yesterday and couldn't quite get it to work. Darn! I was so excited to try Fragments finally.
Again thank you for your article. Don't feel bad about your examples, they were very helpful, so in that context they were the perfect choices :)
Great post. Previously I had only seen the React.Fragment or <> </> methods for using fragments. That’s cool to see the destructuring method to use instead. I like that as it semantically helps to know what the element is doing and helping build tools is great too.
That's not destructuring, it is a named import.
Differences: youtube.com/watch?v=4keUSxNw-KE
Thanks Dave. I'm glad you find the post useful.
I just used the destructuring approach in a Gatsby project of mine. When I first implemented it the code didn't compile, so I came back to this post and found my mistake. I had messed up the import statement. Thanks again!
We all make mistakes as devs. I'm glad the post helped you to fix it.
Oh yes. I’m more than happy to make mistakes and learn from them.
I wonder if there is a performance difference between the two ways of using it. If there was, probably not significant... But if you use
React.Fragmentin a component where the logic is to conditionally render some jsx or null, would it act like a dynamic import?Hi sarah,
Great post!,it's really helpful to understand in detail about fragment.Now i got the perfect definition about fragment,expecting more post like this
Thank you
Thank you for reading it.
Thanks Sarah.
I liked how the Fragment can be used and what problem it solves 😄
I'm glad you like it. Thank you.