Rendering two Elements exercise

React Web Development Course
#1

Suppose the following two React elements are given.


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

Render them both using just one ReactDOM.render call. If you encounter an error, check out the error message and recall how React.createElement works.

11 Likes
#2

Again loving how the video first runs the code with the error then uses the error message as part of the lesson! :star_struck:

Multiple Elements Solution

Components must always be wrapped in something, like a div.

        ReactDOM.render(
        <div>
            <HelloMessage name="Jeremy" />
            <HelloMessage name="Joe" />
        </div>,
        document.getElementById('hello-example')
        );

Ok after seeing the next video it’s better to use fragments instead of divs. This is because the fragments don’t get injected into the DOM. Depending on what parent element the component gets injected into wrapping them in divs may result in malformed html.

So…

ReactDOM.render(
        <>
            <HelloMessage name="Jeremy" />
            <HelloMessage name="Joe" />
        </>,
        document.getElementById('hello-example')
        );
5 Likes
#3

Yes, the React fragment solution is generally better, because the #hello-example element is usually already a div, so why would we create another div?

#4

ReactDOM.render(

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

  );
1 Like
#5

In the script section of my html document:

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

      var greetings = [
      <HelloMessage name="Clem" />,
      <HelloMessage name="Joan" />
      ]

      ReactDOM.render (
        greetings,
        document.getElementById('root')
      );
1 Like
#6

@xactant, read this article on rendering lists: https://reactjs.org/docs/lists-and-keys.html

2 Likes
#7 
<body>
    <div id="root"></div>
    <script type="text/babel">

class HelloMessage extends React.Component {
  render() {
    const names = this.props.names;
  const listItems = names.map((name) =>
    <li key={name}>Hello, {name}</li>
  );
  return (
    <ul> {listItems}</ul>
  );
}

  }

  const names = ["Zsolt","Sarah"];
ReactDOM.render(
  <HelloMessage names={names} />,
  document.getElementById('root')
);
    </script>
</body>
1 Like
#8

@Lizette and @zsolt-nagy I have a question about the first quiz.

For question two why is this wrong?
num2

The option “Text” is not one of the four choices presented. Additionally when I run the target code:

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

<script type="text/babel">

ReactDOM.render (
        React.createElement('div', { className: 'test' }, 'Text'),
        document.getElementById('root')
      );
</script>

The result is option “B” as demonstrated:

actual

Thank you

#9 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/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>
    <ul id="hello-example"></ul>
    <script type="text/babel">

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

ReactDOM.render(
  <>
  <HelloMessage name="Mark" />
  <HelloMessage name="Melissa" />
  </>,
  document.getElementById("hello-example")
);

    </script>
#10

Your answer is correct. I have checked out the form and reported this issue. Sorry for the confusion.

1 Like
#11

Thank you for responding!

#12 
ReactDOM.render(
      <p><HelloMessage name= "Bill"/>
      <HelloMessage name= "Jack"/></p>,
      document.getElementById('root')
    );

Interesting seeing so many different solutions to the same problem here.

1 Like
#13 
<>
  <HelloMessage name="Zsolt" />
	<HelloMessage name="Sarah" /> 
</>

translates to

"use strict";

/*#__PURE__*/
React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(HelloMessage, {
  name: "Zsolt"
}), /*#__PURE__*/React.createElement(HelloMessage, {
  name: "Sarah"
}));
2 Likes
#14 
ReactDOM.render(
    <><HelloMessage name="Zsolt" />
    <HelloMessage name="Sarah" /> </>, 
   document.getElementById('root')
    );

and with Babel as you show :https://forumtest.ivanontech.com/t/rendering-two-elements-exercise/19185/13?u=ibourn
we see createElement applied to Fragment and then inside we have our 2 createElement

2 Likes
#15

I followed the errors and did what I been told <>…</>

 <>
 <HelloMessage name="Taylor"/> <HelloMessage name="Sarah"/></>,
2 Likes
#16 
ReactDOM.render(
    <><HelloMessage name="Zsolt" /><HelloMessage name="Sarah" /> </>,
  document.getElementById('root')
);
3 Likes
#17 
<html>   

  <head>

    <meta charset="UTF-8" />

    <title>Hello World</title>

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

    <script src="https://unpkg.com/react-dom@16/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() {

    const names = this.props.names;

  const listItems = names.map((name) =>

    <li key={name}>Hello, {name}</li>

  );

  return (

    <ul> {listItems}</ul>

  );

}

  }

  const names = ["James","Sarah"];

ReactDOM.render(

  <HelloMessage names={names} />,

  document.getElementById('root')

);

 </script>

</body>

</html>
2 Likes
#18

The gist of it:

image
image1767Ă—1226 359 KB

1 Like
#19

My two ways:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
  </head>
  <body>
    
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <div id="root"></div>
    <script type="text/babel"> 
    
    class HelloMessage extends React.Component {
    render() {
      return (
        <div>
          Hello {this.props.name}
        </div>
      );
    }
  }

  const names = ["Funky", " Grass"];

  ReactDOM.render(<HelloMessage name = { names }/>,
    document.getElementById('root')
  );
    
    
    
    </script>

  </body>
</html>

and this is the second version:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
  </head>
  <body>
    
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <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="Funky"/>,
  <HelloMessage name="Grass"/>,
    </div>,
  document.getElementById('root')   
  );
    
    
    </script>

  </body>
</html>
2 Likes
#20 
ReactDOM.render(
<><HelloMessage name="name1" /><HelloMessage name="name2" /></>
document.getElementById('root')
);
1 Like