why we use fragment in react

1render() {
2  return (
3    <React.Fragment>
4      <ChildA />
5      <ChildB />
6      <ChildC />
7    </React.Fragment>
8  );
9}

1render() {
2  return (
3    <>
4      <div><div/>
5      <div><div/>
6      <div><div/>
7    </>
8  );
9}

1//the same way you'd use any other element 
2//except that it doesn't support keys or attributes.
3
4render() {
5  return (
6    <>
7      <p>Hello</p>
8      <p>World!</p>
9    </>
10  );
11}
12
13

1//when we are trying to render more than one root element we have to put the 
2//entire content inside the ‘div’ tag. 
3
4//Fragments to the rescue. Fragments are a modern syntax for adding multiple 
5//elements to a React Component without wrapping them in an extra DOM node.
6
7//React Fragments do not produce any extra elements in the DOM, which means 
8//that a Fragment’s child components will be rendered without any wrapping DOM 
9//node.
10//example:
11function FragementDemo(){
12return (<React.Fragement>
13        <h1>Hello world</h1>
14        <p>This is a react fragment Demo </p>
15        </React.Fragment>)
16}