ReactJS Tutorial – 25 – Fragments
![*](https://i0.wp.com/allprowebdesigns.com/wp-content/uploads/2023/12/1703805958_maxresdefault.jpg?resize=840%2C430&ssl=1)
Video Title: ReactJS Tutorial – 25 – Fragments
Alright guys now that we have the basics of react behind us it’s time to focus on some of the topics mentioned under the Advanced section in the official react documentation let’s start with one of the more easier topics to understand in this video let’s learn about react fragments fragments basically lets you
Group a list of children elements without adding extra nodes to the Dom let us understand what that means with an example vs code and we’ll start off by creating a new file fragment demo dot jeaious within the file I’m going to use the reactor snippet RFC II to create a functional component
In the JSX I will simply specify the text fragment demo in the app component I will include the fragment demo component if you save the files and take a look at the browser you should be able to see the text fragment demo now let’s go back
To the fragment demo component and add a few more elements in the JSX now I want to convert the text fragment demo into a heading so I will replace the div tag with an h1 tag right after the heading I want to add a simple description using a paragraph tag
This describes the fragment demo component but when I do this we get a red squiggly line at the closing parenthesis of the return statement and when I hover on that you can see that it says JSX expressions must have one parent element if you save the file and take a look at
The browser you can see that the application is broken as well and the error message points to the same thing adjacent JSX elements must be wrapped in an enclosing tag so anytime your component has to return multiple elements you have to enclose them in a single parent element so let’s add that
In closing div tag when I format it you can see that we have an enclosing dip tag and the each one and the paragraph elements are contained within this enclosing div tag if you now save the file and take a look at the browser everything works fine but
If we inspect the element you can notice that we have the enclosing div tag included in the Dom tree so between the div tag from app component and the h1 tag in fragment demo component we have an additional div tag this is well react fragments come into picture we can
Replace the enclosing div tag with react fragment and that will prevent the extra node from being added to the Dom so all you have to do is in fragment demo component replace this existing div tag with react dot fragment make sure to change the closing tag as
Well now if you save the file and go back to the browser inspect the element you can see that we no longer have the div tag between the app component div tag and the h1 tag and if you go back to vs code you can see that we are still
Returning multiple elements in the JSX all right now let’s take a look at another example where react fragments seems much more appropriate I am going to create two new files so within the components folder table dot j s and columns dot j s within the table file
I’m going to use the react snippet r f c/e to create a functional component for the GS x i’m going to replace the div tag with a table tag and within the table I’m going to add a tee body tag and then a TR tag to create a row of
Data within the row I want to render columns and the columns will be maintained in a separate component which is our columns component so let’s go to column Jes and using the reacts Tibet our FCE create another functional component within the JSX I’m going to add two columns so TD name and another
TD which was because we are returning multiple elements we need the enclosing div tag now back in the table component I will include the columns component and back in app component I will include the table component if you know save all the files and take
A look at the browser you should be able to see the two columns name and vishwas if you take a look at the console though we have warnings and the warning is validate Dom nesting TD cannot appear as a child of the dev had basically it is
Telling us that it is wrong to have a TD element as a child of a div tag if I inspect the element you can pretty much see that in the dom tree pd within the div tag and this dip tag was necessary because we were returning multiple elements in the JSX
Of columns component but hey now we have the better alternative we can replace this div tag with react dot fragment so I’m going to go back to vs code and in columns component I’m going to replace the div tag with react dot fragment if you now go back to the browser you
Can see that all console warnings have disappeared if we inspect the element you can see that we have the table tag tbody TR and then TD there is no div tag in between the final point on fragments is that it can accept the key attribute when rendering lists of items for
Example let’s assume we have an array of items stored in a variable called items then we could have items dot map and then we have an arrow function the parameter is item and the function can return a react fragment because items in the list need the key prop though we can specify the
Key attribute on react fragment key is equal to let’s say item dot ID and within the JSX we can have multiple elements being returned let’s say a heading that says title and then a paragraph tag that renders item dot title this is completely possible as of this recording key
Attribute is the only attribute that can be passed to a reactive fragment the reactive hopes to add additional attributes in the future but for now keep in mind to pass in only the key attribute now there is also a shorthand syntax that you can use for react fragments
Instead of react dot fragment you can use an empty opening tag and an empty closing tag I will get rid of this items rendering and now I can replace react dot fragment with an empty opening tag and an empty closing tag this basically represents the idea that it won’t add an
Actual element to the Dom if you do use this shorthand syntax though there is one limitation you cannot pass in the key attribute so let’s save this and take a look at the browser and you should still see name and which was the two columns we have specified so that is
About react fragments fragments let you group a list of children elements without adding extra nodes to the Dom thank you guys for watching don’t forget subscribe I’ll see you guys in the next video
-
Sale!
Wireless WIFI Repeater Extender Amplifier Booster 300Mbps
$29.99$14.99 Add to cartWireless WIFI Repeater Extender Amplifier Booster 300Mbps
Categories: Electronics, Wi-Fi Router, Wireless Wi-Fi Extender Tags: 300Mbps, 802.11N, Amplifier, Booster, Extender, mobile wi-fi booster, Remote, WIFI, Wireless, Wireless WIFI, Wireless WIFI Repeater, Wireless WIFI Repeater Extender, Wireless WIFI Repeater Extender Amplifier, Wireless WIFI Repeater Extender Amplifier Booster, Wireless WIFI Repeater Extender Amplifier Booster 300Mbps$29.99$14.99 -
Sale!
Full RGB Light Design Gaming Headset Headphones with Mic
$24.99$14.99 Add to cartFull RGB Light Design Gaming Headset Headphones with Mic
Categories: Electronics, Gaming, Gaming Headsets Tags: Design, Full, Full RGB Light Design Gaming Headset, Full RGB Light Design Gaming Headset Headphones, Full RGB Light Design Gaming Headset Headphones with Mic, Gamer, Gaming, Gaming Headset Headphones, gaming headset wireless, Headphone, Headphones, Headset, Light, Mic, Package, RGB$24.99$14.99 -
Sale!
Wireless BlueTooth Multi-Device Keyboard Mouse Combo
$39.99$19.99 Add to cartWireless BlueTooth Multi-Device Keyboard Mouse Combo
Categories: Electronics, Gaming, Gaming Keyboards, Keyboard Mouse Combos Tags: Combo, Keyboard, keyboard mouse combos, Mouse, MultiDevice, Set, WireKeyboard Mouse Combo, Wireless, Wireless BlueTooth Keyboard Mouse Combo, Wireless BlueTooth Keyboard Mouse Combos, Wireless BlueTooth Multi-Device Keyboard Mouse Combo, Wireless BlueTooth Multi-Device Keyboard Mouse Combos$39.99$19.99 -
Sale!
High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
$199.99$139.99 Add to cartHigh Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
Categories: Gaming, Gaming Chairs Tags: Adjustable, Chair, computer chairs, Desk, Executive, Gaming, Girl, Headrest, High, High Back Leather Executive Adjustable Swivel Gaming Chair, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar, High Back Leather Executive Adjustable Swivel Gaming Chairs, Leather, Lumbar, Office, Racing, Swivel$199.99$139.99 -
Sale!
Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
$29.99$19.99 Select optionsProfessional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
SKU: N/A Categories: Electronics, Gaming, Gaming Headsets Tags: Cancelling, Gaming, Gaming Headphones with Noise Cancelling Microphone, gaming headset, Headphones, Headset, LED, Light, Mic, Microphone, Noise, Professional, Professional LED Light Wired Gaming Headphones, Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone, Wired, Wired Gaming Headphones, Wired Gaming Headphones with Noise Cancelling Microphone$29.99$19.99 -
Sale!
Gaming Desk with LED Lights USB Power Outlets and Charging Ports
$349.99$249.99 Select optionsGaming Desk with LED Lights USB Power Outlets and Charging Ports
SKU: N/A Categories: Computer Desk, Gaming, Gaming Desk Tags: and Charging Ports, Charging, Desk, Desks, Gaming, gaming desk with led lights, Gaming Desks with LED Lights, Home, LED, Lights, Monitor, Office, Outlets, Port, Power, Room, Stand, USB, USB Power Outlets, White, Workstation$349.99$249.99 -
Sale!
Wired Mixed Backlit Anti-Ghosting Gaming Keyboard
$99.99$79.99 Add to cartWired Mixed Backlit Anti-Ghosting Gaming Keyboard
Categories: Electronics, Gaming, Gaming Keyboards Tags: Antighosting, Backlit, Blue, brown, Gaming, Gaming Keyboard, gaming keyboards, gaming keyboards and mouse, Keyboard, Laptop, Switch, Wired, Wired Mixed Backlit Anti-Ghosting Gaming Keyboard, Wired Mixed Backlit Anti-Ghosting Gaming Keyboards, Wired Mixed Backlit Gaming Keyboard$99.99$79.99 -
Sale!
Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
$119.99$59.99 Add to cartWireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
Categories: Electronics, Gaming, Gaming Headsets Tags: 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, ANC, Audio, Bluetooth, Cancellation, Ear, Earphone, gaming headset, Headphones, Headset, Hi-Res Over the Ear Headphones Headset, HiRes, Noise, Wireless, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Headphones, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headsets$119.99$59.99 -
Sale!
Wired Sports Gaming Headset Earbuds with Microphone
$19.99$9.99 Select optionsWired Sports Gaming Headset Earbuds with Microphone
SKU: N/A Categories: Gaming, Gaming Headsets Tags: Accessories, Earbud, Earphone, Earphones, Gaming, gaming headset with microphone, Headphones, Headset, IOS, Microphone, Sports, Wired, Wired Sports Gaming Headset Earbuds, Wired Sports Gaming Headset Earbuds with Microphone, Wired Sports Headset Earbuds$19.99$9.99 -
Sale!
150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
$49.99$29.99 Add to cart150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
Categories: Charging Stations, Electronics Tags: 150W, 150W Charging Station, 150W Universal Multi USB Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Stations, 150W Universal Multi USB MAX Charging Station, 16 Port MAX Charging Station, 3.5A, Charger, Charging, Fast, laptop charging stations, Max, Multi, Port, Stand, Station, Universal, USB$49.99$29.99
Nice video but the i wanna remind u r taking about lifecycle method and suddelny at end u started this….why???
completed video 25. Thank you 🙂
Crystal clear! Thank you!
Please make a video on making a first react app using create react app in new uodated version of recat
Why I am not able to print value of key prop in fragment as it prints undefined when I try to print it.
and why is key prop used in React fragments??
Simple and helpful.
great video, thank you!
Aren't you the best!! hat's off!
React fragment let us group children elements without adding any extra node in DOM, like <div>
Amazing explanation, thanks!
9:09 when using empty tags it is not possible to use key attribute with React Fragment
7:22 key attribute can also be defined along with React Fragment
3:00 when we use div tag, then an additional div tag with suffix $0 is seen in console.
I really appreciate your effort by making each and every concept a piece of cake
Thanks for simple explanation and good pronounce
Where can I find the code samples for this video and following? I don't see them in the Github repo.
7:11 about key attribute
💗💗💗
7:17 fragments can accept key attribute when rendering lists
But where the actual key will be added? If we create no parent element, why do we specify key?
amazing video
Love from Bangladesh
I have one question to ask u that is, If we use
<React.Fragment> </React.Fragment>
Or <></>
then we don't need enclosing tags, I understand the problems may occur. But while creating react app in vscode, in the render() method why these tags not generated automatically when we create a code template rather it surrounded with <div><div/> tag ?
vscode generates:
render() {
return <div></div>;
}
But why not :
render() {
return (
<React.Fragment>
</React.Fragment>
);
}
A lots of appreciation from me. Really I had never seen such a great way of teaching before. Stay blessed always.
React fragement grouped the child elements without adding extra node to DOM
Beautiful accent
Note: React fragment let us group children elements without adding any extra node in DOM
Great explanation! Perfect 🙂
All videos are very helpful to understand react concepts..
i react => {wow!}