Rendering Adjacent JSX Elements using JS Arrays

Author: Ch-sriram

README.md

@@ -87,3 +87,5 @@ In this repository, I've implemented (or implementing) all the concepts related
    2. Using `React.memo()` for optimizing functional components: [Commit Details](https://github.com/Ch-sriram/react/commit/0b5aecceb6914057e212a9901131b54c180e63b5)
    3. Checking all the `props` info using `shouldComponentUpdate`: [Commit Details](https://github.com/Ch-sriram/react/commit/6dec77afa3170c223fc833adf04bd72ed34d3006)
    4. Delegating the task done in 8.3 to a `PureComponent` by extending a `PureComponent`: [Commit Details](https://github.com/Ch-sriram/react/commit/8efc19ec3559c40a96ac32e13588c3aa04f2e4ae)
+9. Rendering Adjacent JSX Elements
+   1. Using JS Arrays/Lists: [Commit Details]()

react-examples/src/components/Persons/Person/Person.component.jsx

@@ -4,18 +4,23 @@ import PersonStyleClasses from './Person-style.module.css';
 class Person extends Component {
   render() {
     console.log("[Person.jsx] rendering...");
-    return (
-      <div className={PersonStyleClasses.Person}>
-        <p onClick={this.props.click}>
-          I'm {this.props.name} and I'm {this.props.age} years old!
-        </p>
-        <input
-          type="text"
-          onChange={this.props.changed}
-          value={this.props.name}
-        />
-      </div>
-    );
+    /**
+     * What we have to take care when we return a list of 
+     * components as JSX, in that case, we have to give a `key`
+     * property to every component inside the list.
+     */
+    return [
+      <p key="comp1" onClick={this.props.click}>
+        I'm {this.props.name} and I'm {this.props.age} years old!
+      </p>,
+      <p key={"comp2"}>{this.props.children}</p>,
+      <input
+        key="comp3"
+        type="text"
+        onChange={this.props.changed}
+        value={this.props.name}
+      />
+    ];
   }
 }
 

react-examples/src/components/Persons/Persons.component.jsx

@@ -45,6 +45,18 @@ class Persons extends PureComponent {
 
   render() {
     console.log("[Persons.jsx] rendering...");
+    /**
+     * Here, we are returning a list of <Person/> components, 
+     * not components which are wrapped inside a <div>, and so
+     * in React, this is absolutely possible.
+     * 
+     * Therefore, from any kind of a component, we can actually
+     * just return a single <div> or a list of components as we
+     * have done below.
+     * 
+     * This same approach will be used to render the components
+     * of the <Person/> component.
+     */
     return this.props.persons.map((person, index) => {
       return (
         <Person