why use fragment react js code example

Example 1: how to use react fragment

//the same way you'd use any other element 
//except that it doesn't support keys or attributes.

render() {
  return (
    <>
      <p>Hello</p>
      <p>World!</p>
    </>
  );
}

Example 2: why we use fragment in react

//when we are trying to render more than one root element we have to put the 
//entire content inside the ‘div’ tag. 

//Fragments to the rescue. Fragments are a modern syntax for adding multiple 
//elements to a React Component without wrapping them in an extra DOM node.

//React Fragments do not produce any extra elements in the DOM, which means 
//that a Fragment’s child components will be rendered without any wrapping DOM 
//node.
//example:
function FragementDemo(){
return (<React.Fragement>
        <h1>Hello world</h1>
        <p>This is a react fragment Demo </p>
        </React.Fragment>)
}