Rendering two Elements exercise

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

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

2 Likes
<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

@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

<!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>

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

1 Like

Thank you for responding!

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
<>
  <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
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

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

 <>
 <HelloMessage name="Taylor"/> <HelloMessage name="Sarah"/></>,
2 Likes
ReactDOM.render(
    <><HelloMessage name="Zsolt" /><HelloMessage name="Sarah" /> </>,
  document.getElementById('root')
);
3 Likes
<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

The gist of it:

1 Like

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>
1 Like
ReactDOM.render(
<><HelloMessage name="name1" /><HelloMessage name="name2" /></>
document.getElementById('root')
);
1 Like

Fun Fun! it took me a bit to figure this one out, and starting to see now how everything is supposed to tie together.

1 Like
<><HelloMessage name="George" /><HelloMessage name="Martin" /></>,
1 Like
class HelloMessage extends React.Component {

render(){
        return <div> Hello {this.props.name} </div>
    };
}

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