Rendering two Elements exercise

[Malik]

Please try to increase the resolution of the video when playing so that it is clearer for you to read the text.

[bjamRez]

Than you Malik, I think that will help

[Vivek20]

@Lizette

<HelloMessage name="Zsolt" /><HelloMessage name="Sarah" />

<>
<HelloMessage name="Zsolt" /><HelloMessage name="Sarah" />
</>```

[Floriano]

 <div> 
        <HelloMessage name="Zsolt"/> <HelloMessage name="Sarah"/>
    </div>,
   document.getElementById('root')

);

[andrequintino]

ReactDOM.render(

        <><HelloMessage name="Zsolt" /><HelloMessage name="Sarah" /></>,
        document.getElementById('root')

);

[mervxxgotti]

class HelloMessage extends React.Component {
  render() {
    return (
      <div>
        Hello {this.props.name}
      </div>
    );
  }
}

ReactDOM.render(
  <>
    <HelloMessage name="Zsolt"/>
    <HelloMessage name="Sarah"/>
  </>,
  document.getElementById("root")
);

[tanu_g]

<HelloMessage name="Zsolt"/><HelloMessage name="Sarah"/>

can be rendered as following -

ReactDOM.render(
<>
<HelloMessage name="Zsolt"/>
<HelloMessage name="Sarah"/>
</>,
document.getElementById('root'));

[Emmanuel]

<meta charset="UTF-8" />

<title>Hello World</title>

<script src="https://unpkg.com/react@17/umd/react.development.js"></script>

<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

<!-- Don't use this in production: -->

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

<div id="root"></div>

<script type="text/babel">

/*  ReactDOM.render(

    <h1>Hello, world!</h1>,

    document.getElementById('root')

  );

  */

  class HelloMessage extends React.Component {

render() {

return (

  <div>

    

    Hello, {this.props.name}

  </div>

);

}

}

var names =

         <HelloMessage name="TEamo" /></li>

ReactDOM.render( names,

document.getElementById(‘root’)

);

</script>

[Emmanuel]

class HelloMessage extends React.Component {

  render() {

    return (

      <div>

        

        Hello, {this.props.name}

      </div>

    );

  }

}

var names = <li key = "unique"><HelloMessage name="Taylor"/>

             <HelloMessage name="TEamo" /></li>

ReactDOM.render(  names,

  

  document.getElementById('root')

);

    </script>

 

  </body>

</html>

[eo0795]

**<HelloMessage name="Zsolt" /><HelloMessage name="Sarah" />**
**<><HelloMessage name="Zsolt" /><HelloMessage name="Sarah" /></>**

As per the console hint, jsx fragments were added

[CBlock9]

Code gave me a fragment error. using the suggestions from Babel i was able to use the code below to print both messages.

ReactDOM.render( React.createElement(React.Fragment, null,

React.createElement(HelloMessage, {

name: "Corey"

}),

React.createElement(HelloMessage, {

name: “Sarah”

})), document.getElementById(‘root’));

[Daniel.P]

ReactDOM.render(
  <>
  <HelloMessage name= "Zsolt"/>
  <HelloMessage name= "Sarah"/>
  </>,
  document.getElementById("root")
);

[HRMS2021]

<>
  <HelloMessage name="Zsolt" />
  <HelloMessage name="Sarah" />
  
  </>

“use strict”;

/#PURE/
React.createElement(React.Fragment, null, /#PURE/React.createElement(HelloMessage, {
name: “Zsolt”
}), /#PURE/React.createElement(HelloMessage, {
name: “Sarah”
}));

[Kiril_Tchaliov]

ReactDOM.render(
 (<div>
  {<HelloMessage name="Kiko" />} {<HelloMessage name="NAME" />}

  </div>),
  
  document.getElementById('root')
);```

[Melshman]

It looks like ReactJS is going to let me send an array of components to the render() method. The segment below allows for rendering multiple instances of a react component with a single render() call.

ReactDOM.render(
        [<HelloMessage name="David"/>,
        <HelloMessage name="Arlyn"/>],
        document.getElementById('root')
      );

[jak]

Use a JSX fragment, by putting both of the calls inside empty elements, known as fragments:

        ReactDOM.render(
            <>
            <HelloMessage name = "Jack"/>
            <HelloMessage name = "Jason"/>
            </>,
            document.getElementById('root')
        );

[alejandravisa]

<div id="root"></div>

  <script type="text/babel">

    class HelloMessage extends React.Component {
      render() {
        return (
          <div>
            <label htmlFor="name-field" className="mr-auto">Name: </label>
            <input type="text" id="name-field" />
            Hello, {this.props.name}!
          </div>
        );
      };
    };

    ReactDOM.render(
      <div>
        <HelloMessage name="Alejandra" />
        <HelloMessage name="Carlos" />
      </div>,

      document.getElementById('root'),
    );

  </script>

[gcrypto]

<body>
    <div id="root"></div>
    <script type="text/babel">    
        class HelloMessage extends React.Component {
            render() {
                return (
                <div>
                    <label htmlFor="name-field" className="mr-auto">Name: </label>
                    <input type="text" id="name-field"/>
                    Hello {this.props.name}
                </div>
                );
            }
        }
        ReactDOM.render(
            <React.Fragment><HelloMessage name="gcrypto" /><HelloMessage name="gcrypta" /></React.Fragment>,
            document.getElementById('root')
        );
    </script>
  </body>

[CasNWK]

    <div id="hello3"></div>
    <script type="text/babel">
        class HelloMessage extends React.Component {
            render() {
                return(
                    <div>Hello, {this.props.name}!</div>
                );
            }
        }

        ReactDOM.render(
            <div><HelloMessage name="Cas" /><HelloMessage name="NWK" /></div>,
            document.getElementById("hello3")
        );
    </script>

[ibn5x]

Rendering Two Elements Exercise Proposed Solution

Here is my proposed solution.

ReactDOM.render(
           <><HelloMessage name= "Mikal" />
            <HelloMessage name= "Sara" /> </>,
            document.getElementById('rooty')
        )