Rendering two Elements exercise

React Web Development Course
#84

I simply decided to create another div within the body with a new id. Then i decided to create another render which prints a hello message with the new name to the new div. I am not sure if this is the most correct way to do it but it worked for me.

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

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

ReactDOM.render(
  <HelloMessage name="Billy" />,
  document.getElementById('root')
);
ReactDOM.render(
  <HelloMessage name="Timmy" />,
  document.getElementById('yeet')
);
2 Likes
#85

Well I got it to add multiply components using one ReactDOM.render(), but I dont think its the right way.

class Hello extends React.Component{
render() {
return (

<>
<td> Hello, TotalingArc! </td>
<td> Hello, MercifulMercury! </td>
</>
);

}

}

ReactDOM.render(<Hello/>,
document.getEelementById('root')

);
2 Likes
#86 
ReactDOM.render(
<> <HelloMessage name= "Victrix"/>
  <HelloMessage name= "Gaby"/> </>,
  document.getElementbyId("root")
);
2 Likes
#87 
ReactDom.render(
    <div>
    <HelloMessage name="Zsolt"/>
    <HelloMessage name="Sarah"/>
    </div>,
    document.getElementById("root")
);
2 Likes
#88

ReactDOM.render(

    <><HelloMessage name="Zsolt" />

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

    document.getElementById('root')

  );
2 Likes
#89

Trying to break things here, I found that having the elements in a JS list also works, although we should give distinct keys to the elements to avoid getting a warning in the console.

List wrapper solution 
ReactDOM.render(
  [<HelloMessage key= '1' name="Zsolt" />,<HelloMessage key= '2' name="Sarah" />],
  document.getElementById('root')
);
3 Likes
#90 
      ReactDOM.render(
        <>
          <HelloMessage name="Zsolt"/><HelloMessage name = "Sarah" />
        </>,
        document.getElementById('root')
      );

/*#__PURE__*/
React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(HelloMessage, {
  name: "Zsolt"
}), /*#__PURE__*/React.createElement(HelloMessage, {
  name: "Sarah"
}));
2 Likes
#91 
ReactDOM.render(

        <><HelloMessage name="first name"/><HelloMessage name="second name"/></>,

        document.getElementById('hello-example')

      );
2 Likes
#92

I have an issue with my react
I loaded the page it showed me

./src/reportWebVitals.jsModule not found: Can't resolve 'web-vitals' in '/Users/favor/coin-exchange/src'
#93

HI @chim4us

Please make sure the directory of the module in the import statement is the correct directory in the folder structure.

#96 
    ReactDOM.render(
        <>
            <HelloMessage name="Carl" />
            <HelloMessage name="Bob" />
        </>,

        document.getElementById('root')
    );
2 Likes
#97 
 class HelloMessage extends React.Component {
        render() {
          return (
            <div>
              <>
              <p>
              Hello, {this.props.name}!
              Age, {this.props.age}!
              Favorite Sport, {this.props.sport}!
              </p>
              </>
            </div>
          );
        }
      }

           

      ReactDOM.render(
        <>
        <HelloMessage name = "James" age = "10" sport = "Tenis" />
        <HelloMessage name = "Bill" age = "25" sport = "Football" />
        </>,
        
        document.getElementById('root')
      )

Redid this assignment with a little extra. Why do I get errors when using non " " string variables?

1 Like
#98 
<div id="root"></div>



<script type="text/babel">

class HelloMessage extends React.Component {

render() {

return (

  <div>

    <p>Hello {this.props.name}</p>

    <p>Hello {this.props.name2} </p> 

  </div>

);

}

}

ReactDOM.render(

<HelloMessage name="Bujar"name2=“Sarah”/>,

document.getElementById(‘root’)

);

</script>
2 Likes
#99 
        ReactDOM.render(
            <div>
                <HelloMessage name="Pedro" /><HelloMessage name="Sarah" />
            </div>,
            document.getElementById("root")
        );
2 Likes
#100

Hey guys, I’m passing my assignment here, I’m reading the React Docs, and I found out that there are two ways of coding this, using functions and class components. Up to now, Zsolt uses class components, but I find it easier to do the functions instead, anyway here are my codes for both.

  • Using class components
    <div id="root"></div>
    <script type="text/babel">

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

        ReactDOM.render(
          <>
            <HelloMessage name="Xyz"/>
            <HelloMessage name="Via"/>
          </>,
            document.getElementById('root')
        );
    
    </script>
  • Using functions
    <div id="root"></div>
    <script type="text/babel">

        function HelloMessage(_input){
          return <p> Hello, {_input.name}!</p>
        }

        function Names() {
          return(
            <div>
              <HelloMessage name="Xyz"/>
              <HelloMessage name="Via"/>
            </div>
          );
        }
    

        ReactDOM.render(
            <Names />,
            document.getElementById('root')
        );
    
    </script>
2 Likes
#101

Both are acceptable ways to code your react components. Using functions is however the newer implementation, so just be aware of that when searching for answers online.

Very happy that you went out of your way to find other methods to do the same thing. That’s like a true programmer !

Cheers. Happy Learning! :smile:

1 Like
#102

`ReactDOM.render(

    <><HelloMessage name = "Jonathan"/><HelloMessage name="Catherine" /></>,

    document.getElementById('root')

  );

`

2 Likes
#103

It was relatively easy to figure out how to render using just one call. Console basically tells you that you need to us and open and closing tag to make a fragment. I was able to discern the proper use of the comma by previous code comparison. Its easy to see how something like that comma could become a nuisance once code gets large and you might forget something. Again a small change to assignment.


  <><HelloMessage name="Trent, Ruler of the Galaxy" /><HelloMessage name="Trent, Destoryer of 

  worlds" /></>,

  document.getElementById('root')

);
2 Likes
#104

Ok, here’s my code:

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

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

React must be structured.

2 Likes
#105

I am having a hard time following this course, the code was recorded in zoomed out mode so I can barely make out what the instructor is doing.

Is there an alternative to learning this here in the academy?