Rendering two Elements exercise

React Web Development Course
#166

by wrapping the two Hello message elements in an extra open/close tag - <> </> - we can combine them together as one ReactDOM.render call.

1 Like
#167 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React Render Two Element </title>

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

    <!--  Load Babel  -->
    <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="Taylor" /> <HelloMessage name="Sarah" /> </>,
            document.getElementById('root')
        );
    </script>
</body>
</html>
1 Like
#168 
class HelloMessage extends React.Component {
  render() {
    return (
      <div>
        <p>Hello {this.props.nameA}</p>
        <p>Hello {this.props.nameB}</p>
      </div>
    );
  }
}

ReactDOM.render(
  <HelloMessage nameA="Taylor"  nameB="Tyler"/>,
  document.getElementById("root")
1 Like
#169

ReactDOM.render(
<></>,
document.getElementById(‘hello-example’)
);

#170

Has anyone else encountered message about ReactDOM being obsoleted? If so, is there a workaround for now? Last comment I saw on stackoverflow is that the is a bug fix in the works but not yet released so not sure what the workaround is.

https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#updates-to-client-rendering-apis

Cheers

1 Like
#173

can u share you ecct wrror message ill help

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

  ReactDOM.render(
    <div>
      <HelloMessage name="Zsolt" />
      <HelloMessage name="Paul" />
    </div>,
  document.getElementById('root')
);
1 Like
#175 
      const container = document.getElementById('root');
      const root = ReactDOM.createRoot(container);
      root.render(
          <>
            <HelloMessage name="Tony" />
            <HelloMessage name="Sarah" />
          </>)
1 Like
#176 
<script type="text/babel">

      class HelloMessage extends React.Component {

        render() {

          return (

            <>

              <div>Hello!</div>

              <div>Have a nice day {this.props.name}!</div>

            </>

          );

        }

      }

      const container = document.getElementById("root");

      const root = ReactDOM.createRoot(container);

      root.render(

        <>

          <HelloMessage name="Zsolt" />

          <HelloMessage name="Calin" />

        </>

      );

    </script>
1 Like
#177

ok, that makes sense. :nerd_face:

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

      const container = document.getElementById('root');
      const root = ReactDOM.createRoot(container);

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

      root.render(<div>
        <HelloMessage name="Hansel" /> 
        <HelloMessage name="Gretel"/>
        </div>);


    </script>
1 Like
#178

Hi asepetys, I saw the same error message it went after I replaced this


      const container = document.getElementById('root');

      ReactDOM.render(<div>
        <HelloMessage name="Hansel" /> 
        <HelloMessage name="Gretel"/>
        </div>, container);

with this


      const container = document.getElementById('root');
      const root = ReactDOM.createRoot(container);

      root.render(<div>
        <HelloMessage name="Hansel" /> 
        <HelloMessage name="Gretel"/>
        </div>);
1 Like
#179

I need to replace

<div>

with

<>

      root.render(<>
        <HelloMessage name="Hansel" /> 
        <HelloMessage name="Gretel"/>
        </>);
1 Like
#180

Not trying to confuse anyone, but this is how I have my React environment setup:
I’m using ‘/src/App.js’ to input my code => which points to the default ‘/src/index.js’ => and then points to default ‘/public/index.html’

App.js:

import React, { Component } from "react";
import './App.css';

class App extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div className="App">
          <div>
            <h3>Exercise: Hello Message</h3>
          </div>
          <div>
              <span><HelloMessage /></span>
          </div>
       </div>
    );
  }
}

//--------------------------------------------------------------------

class HelloMessage extends React.Component {
  render() {

    var first = 'Zsolt';
    var second = 'Sarah';

    return (
      <div>
        <span>Hello, {first}!</span>
        <br></br>
        <span>Hello, {second}!</span>
      </div>
    )
  }
}

I’m using the default ReactDOM lines that are already in the ‘/src/index.js’ and ‘/public/index.html’ files.

1 Like
#181 
root.render(
  <div>
  <HelloMessage name="Zach"/> <HelloMessage name="Zolt"/>
  </div>
  );
1 Like
#182 
root.render(
      <>
        <HelloMessage name="Zsolt" /> <HelloMessage name="Dave" />
      </>
    );
1 Like
#183 
root.render(
      <>
        <HelloMessage name="easterBunny" /> <HelloMessage name="Santa" />
      </>
    );
#184 
      root.render(
        <div>
          <HelloMessage name="Everyone...yupi!!" />
          <HelloMessage name="Argentina TriCampeon" />
        </div>
      );
1 Like
#185 
class HelloMessage extends React.Component {
        render() {
          return (
            <div>
              Hi, {this.props.name}!
            </div>
          );
        }
      }

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