Rendering two Elements exercise

React Web Development Course
#43 
ReactDOM.render(
   <> <HelloMessage name="Zsolt" /> 
    <HelloMessage name="Sarah" /> </>,
  document.getElementById('root')
);

NOW I get it :slight_smile:

3 Likes
#44 
      const root = document.getElementById('root');

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

      const user1 = <Greeting name="Paddy"/>;
      const user2 = <Greeting name="Tom"/>;
      const user3 = <Greeting name="Harry"/>;
      var entries = [user1, user2, user3];

      ReactDOM.render(
        entries,
        root
      );

Is this correct? I am receiving an error message for not having keys for each list item.

2 Likes
#45

ReactDOM.render(
,
document.getElementById(ā€˜rootā€™)
);

#46

Hi @paddyc1,

The error message that you see is not actually an error but a warning message. React expects any list item to have unique keys attached to each item. Although this wonā€™t break your code, it is always a good practice to have it.

Hope this clears the confusion.

2 Likes
#47

Hi @kHarsh,
You forgot to pass in an element as the first argument. You can either pass a component or an empty div as well.

Happy Learning!

1 Like
#48 
ReactDOM.render(
      <> <HelloMessage name = "Zsolt"/> <HelloMessage name = "Sarah"/> </>,
      document.getElementById('root')
      );
1 Like
#49 
    <div> 
        <HelloMessage name="Zsolt"/> <HelloMessage name="Sarah"/>
    </div>,
   document.getElementById('root')

  );
1 Like
#50

The line would be adjusted thus per the error suggestion,
<><HelloMessage name="Pooja" /><HelloMessage name="Pigeon"/></>,

2 Likes
#51 
<><HelloMessage name="Zsolt" /><HelloMessage name="Sarah" /></>
2 Likes
#52 
ReactDOM.render(
        <div>
        <HelloMessage name="Zsolt"/>
        <HelloMessage name="Sarah"/>
        </div>,
        document.getElementById('root')
      );
1 Like
#53

ReactDOM.render(

      <div>

      <HelloMessage name = "Taylor" />,

      <HelloMessage name = "Sarah" />,

      </div>,

    document.getElementById('root')
1 Like
#54

Itā€™s a good thing that I can easily recognize the errors I make. I was able to solve this exercise with little effort!

<body>
    <div id="root"></div>
    <script type="text/babel">

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

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

Thanks!

1 Like
#55

I just put the two HelloMessage tags inside of empty tags <> </>.

In other words: <> <ā€œfirst HelloMessageā€ /><ā€œsecond HelloMessageā€ /></>,

1 Like
#56 
ReactDOM.render(
        <div>
            <HelloMessage name="bdoherty" /><HelloMessage name="mp" />
        </div>,
        document.getElementById('hello-example')
        );
1 Like
#57

ReactDOM.render(

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

    document.getElementById("root")

  );
1 Like
#58

Exercise: Rendering two Elements
Given elements

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

ReactDOM.render() call

 ReactDOM.render(
          <>
        <HelloMessage name="Zsolt" />
        <HelloMessage name="Sarah" /> </>,
        document.getElementById('helloMessage')
        );
1 Like
#59 
<div id="hello-example"></div>

    <script type="text/babel">

      

    class HelloMessage extends React.Component {

    render() {

       return (

         <div>

             Hello, {this.props.name}!

             Hello, {this.props.name2}!

         </div>

       );

     }

    }

      ReactDOM.render(

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

           document.getElementById('hello-example')

      );

    </script>

Please suggest ways to improve this, thanks!

1 Like
#60

The elements are required to be wrapped by a set of tags, eg <div></div> however there is a shorter way with an unnamed set of tags by using <></>.

reactDOM.render(
    <>
        <HelloMessage name="Zsolt" />
        <HelloMessage name="Sarah" />
    </>,
    document.getElementById('root')
);
1 Like
#61 
class HelloMessage extends React.Component {
    render() {
      return (
          <div>
          Hello {this.props.name} and {this.props.name2}
          </div>
      );
    }
  }
  
  ReactDOM.render(
    <HelloMessage name="Hayden" name2 = "Sara"/>,
    document.getElementById('root')
  );
1 Like
#62 
ReactDOM.render(
  <><HelloMessage name="Taylor" /><HelloMessage name="Sarah" /></>,
  document.getElementById('root')
);
1 Like