Rendering two Elements exercise

React Web Development Course
#63

Encapsulating the two elements in a JSX fragment allows both messages to be rendered with one ReactDOM.render call:

ReactDOM.render(
        <>
            <HelloMessage name="Rupert" />
            <HelloMessage name="Flo" />
        </>,
        document.getElementById('root')
        );
2 Likes
#64 
ReactDOM.render(
    <>
  <HelloMessage name="John" />
  <HelloMessage name="Spartak" />
  </>,
  document.getElementById('root')
);
2 Likes
#65 
ReactDOM.render(
        <>
          <HelloMessage name="Zsolt!" />
          <HelloMessage name="Sarah!" />
        </>,
        document.getElementById('root')
    );
2 Likes
#66 
ReactDOM.render(
  <>
    <HelloMessage name="Zsolt" />
    <HelloMessage name="Sarah" />
  </> ,
  document.getElementById('root')
);

<> is short for <React.Fragment>

Otherwise you can pass a list for the first ReactDOM.render parameter but you’ll get a warning because for speed React needs a unique id for list items

2 Likes
#67 
class HelloMessage extends React.Component {
        render() {
          return (
            <div>
              Hello {this.props.name}
            </div>
          );
        }
      }
      /*ReactDOM.render(
        <h1>Hello, world!</h1>,
        document.getElementById('root')
      );*/
      ReactDOM.render(
        <>
          <HelloMessage name="Dours"/>
          <HelloMessage name="Mamanemone"/>
        </>,
        document.getElementById('root')
      );
2 Likes
#68 
        ReactDOM.render(
            <div>
                <HelloMessage name="Martis"/><HelloMessage name="Lija"/>
            </div>,
            document.getElementById('HelloMessage')
        );
2 Likes
#69 
<body>
    <ul id="root"></ul>
    <script type="text/babel">

class HelloMessage extends React.Component {
  render() {
    return (
      <li>
        Hello {this.props.name} !
      </li>
    );
  }
}
ReactDOM.render(
  <React.Fragment>
    <HelloMessage name = "Moeez"/>
    <HelloMessage name = "Moeeez"/>
  </React.Fragment>,
    document.getElementById('root')
);
</script>
2 Likes
#70 
ReactDOM.render(
      <React.Fragment>
    <HelloMessage name="Stanley"/>,
     <HelloMessage name="Megan" />
     </React.Fragment>,
    
  document.getElementById("root")
);

I used the React.Fragment tag after some googling but upon seeing other solutions I see that it isn’t necessary. Is it better to have the empty tags or fine to leave the React.Fragment tags in the code?

1 Like
#71 
ReactDOM.render(
  <>
  <HelloMessage name= "Ollie!"/>
  <HelloMessage name= "Sarah"/>
  </>,
  document.getElementById("root")
);
2 Likes
#72 
var first = <HelloMessage name="Zsolt" />;
var second = <HelloMessage name="Sarah" />;

ReactDOM.render(
<>{first}{second}</>,
document.getElementById('root')
);
2 Likes
#73 
ReactDOM.render(
  <React.Fragment>
    <HelloMessage name="JD" />
    <HelloMessage name="Raquel" />
  </React.Fragment>,
  document.getElementById('root')
);
2 Likes
#74 
<>
<HelloMessage name="Zsolt" />
<HelloMessage name="Sarah" /> 
</>
2 Likes
#75 
React.createElement("div", null, 
       React.createElement(HelloMessage, {
           name: "Zsolt"
}), " ", 
React.createElement(HelloMessage, {
  name: "Sarah"
}));
2 Likes
#76

Here we go…

 <div id="hello-example"></div>

    <div id="age"></div>
    <script type="text/babel">

    class HelloMessage extends React.Component {
        render() {
            return (
            <div>
            Hello {this.props.name}
            </div>
            );
        }  
    }
   ReactDOM.render(
        <><HelloMessage name="Tom" /><HelloMessage name = "Claudia" /></>,
        document.getElementById('hello-example')
         );
    </script>
    <script type="text/babel">

        class Age extends React.Component {
            render() {
                return (
                <div>
                You are {this.props.age} years old
                </div>
                );
            }  
        }
       ReactDOM.render(
            <><Age age="23" /><Age age="34" /></>,
            document.getElementById('age')
             );
        </script>
2 Likes
#78

How does one get one’s replies to display code?

#79

You can use the “Preformatted Text” Button to encapsulate any kind of code you want to show.

function formatText(){

let words = “I’m a preformatted Text box, Please use me wisely!”

}

prefromatted_text-animated

preformatted text

Happy Learning! :smiley:

1 Like
#80

Wow! Thanks for the help and the thorough anim example! (is that a gif?)
Very helpful!

#81

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

2 Likes
#82 
<!DOCTYPE html>
<html>
  <head>
    <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>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">

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

      ReactDOM.render(
        <>
        <HelloMessage name ="Zsolt"/>
        <HelloMessage name ="Sarah"/>
        </>,
        document.getElementById('root')
      )
    </script>
   </body>
</html>
2 Likes
#83 
ReactDOM.render(
  <>
  <HelloMessage name="Taylor" /><HelloMessage name="Jon" />
  </>,
  document.getElementById('root')
);
2 Likes