In React, whenever you want to render something on the screen, you need to use a render method inside the component. This render method can return single elements or multiple elements. The render method will only render a single root node inside it at a time. However, if you want to return multiple elements, the render method will require a 'div' tag and put the entire content or elements inside it. This extra node to the DOM sometimes results in the wrong formatting of your HTML output and also not loved by the many developers.
// Rendering with div tag
class App extends React.Component {
render() {
return (
//Extraneous div element
Hello World!
Welcome to the rookienerd.
);
}
}To solve this problem, React introduced Fragments from the 16.2 and above version. Fragments allow you to group a list of children without adding extra nodes to the DOM.
child1
child2
.. ..... .... ...
// Rendering with fragments tag
class App extends React.Component {
render() {
return (
Hello World!
Welcome to the rookienerd.
);
}
}The main reason to use Fragments tag is:
There is also another shorthand exists for declaring fragments for the above method. It looks like empty tag in which we can use of '<>' and '' instead of the 'React.Fragment'.
//Rendering with short syntax
class Columns extends React.Component {
render() {
return (
<>
Hello World!
Welcome to the rookienerd
);
}
}The shorthand syntax does not accept key attributes. You need a key for mapping a collection to an array of fragments such as to create a description list. If you need to provide keys, you have to declare the fragments with the explicit <React.Fragment> syntax.
Function = (props) {
return (
{props.items.data.map(item => (
// Without the 'key', React will give a key warning
{item.name}
{item.url}
{item.description}
))}
)
}
