fragment react code example

Example 1: react fragment

render() {
  return (
    <React.Fragment>
      <ChildA />
      <ChildB />
      <ChildC />
    </React.Fragment>
  );
}

Example 2: react fragment

render() {
  return (
    <>
      <div><div/>
      <div><div/>
      <div><div/>
    </>
  );
}

Example 3: 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 4: 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>)
}