1render() {
2 return (
3 <React.Fragment>
4 <ChildA />
5 <ChildB />
6 <ChildC />
7 </React.Fragment>
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}