Rendering two Elements exercise

React Web Development Course
#126

We meet again! Hope all is well my friend, great to see you studying.

1 Like
#127 
ReactDOM.render(
        <div>
          <HelloMessage name="Alice" />
          <HelloMessage name="Bob" />
        </div>,
        document.getElementById('root'),
      )
1 Like
#128 
        class HelloMessage extends React.Component {
            render() {
            return (
                <div>
                    <h2>Hello {this.props.name}! I hope all is well with you!</h2>
                </div>
                );
            }
        }

        ReactDOM.render(
            <><HelloMessage name="Douglas" /> <HelloMessage name="Lily" /></>,
            document.getElementById('root1')
        );
1 Like
#129

Haha all is grand! Ofc, never stop :kissing_smiling_eyes:

1 Like
#130

this worked…not sure if this is what was exactly asked for:

   <script type="text/babel">
        class HelloMessage extends React.Component {
            render() {
                return (
                <div>
                     Hello {this.props.name} <br />
                     Hello {this.props.name2}
                </div>
                );
            }
        }

ReactDOM.render(
  <HelloMessage name="Amit!" name2="Shilpi" />,
  document.getElementById('hello-example')
);

</script>
1 Like
#131

Here is my code:

<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</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>
    <!--<label for="name-field"></label>-->
    <script type="text/babel">
    
    
    class HelloMessage extends React.Component{
        render(){
            return(
           <div>
            
             Hello, {this.props.name}! 
            </div>
            );
        }
    }

    ReactDOM.render(

    <div><HelloMessage name="Rahul"/> <HelloMessage name="Pawar"/></div>,
        document.getElementById('root')
    );

    
    </script>
    
</body>
</html>
<!DOCTYPE html>
1 Like
#132

The script tag should be built as:

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

  ReactDOM.render(
    <div>
      <HelloMessage name="Kippie" />
      <HelloMessage name="Kayla" />
    </div>,
  document.getElementById('root')
);
1 Like
#133

Here is my code for rendering two greetings:

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

ReactDOM.render(
    <><Greeting name="Zsolt"/><Greeting name="Sarah"/></>,
    document.getElementById('root')
);
1 Like
#134

This was difficult in the beginning until considering HTML basics. Then some ideas came to mind and I was able to solve the assignment this way:

    <div id="hello-example"></div>
    <script type="text/babel">
        class HelloMessage extends React.Component {
            render() {
                return (
                <div>
                     Hello {this.props.name} ,<br/>
                     Hello {this.props.name2}
                </div>
                );
            }
        }

ReactDOM.render(
  <HelloMessage name="Junior" name2="Jane"/>,
  document.getElementById('hello-example')
);
1 Like
#135 
<div id="root"></div>

    <script type="text/babel">

        React.createElement(
            'label', {
            for: 'name-field'
        }
        )

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

        ReactDOM.render(
            <React.Fragment>
                <HelloMessage name="AL" />
                <HelloMessage name="Bob" />
            </React.Fragment>,
            document.getElementById('root')
        );
1 Like
#136 
ReactDOM.render(

  <div>

    <HelloMessage name= "Niko" /> <HelloMessage name= "Kevin" />,

  </div>,

  document.getElementById('root')

);
1 Like
#137

First solution that comes to mind is just wrap the two elements in a div

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

Solution

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

      ReactDOM.render(
        <React.Fragment>
          <HelloMessage name="Michael McClimon" />
          <HelloMessage name="Zslot" />
        </React.Fragment>,
        document.getElementById("root")
      );
1 Like
#139

Im struggling with this one. Not sure where in the code to put document.getElementByID(‘root’), it’s white.

I have read lots of documentation, learned about portals, modals and hooks -none of which seemed to be the answer I needed. Thinking that I was making it harder than intended, I looked for documentation on <React.Fragment>. Seems that I am on the right track, but the error message says that I am not there yet. The error message says that I need a comma behind the word “document”. In the code, it is clearly a period. I’m not sure what to do to fix the error message. First of all, am I on the right track? and second:
Any advice?

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

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

    ReactDOM.render(
        <React.Fragment>
            <HelloMessage name="Donnie" />, 
            <HelloMessage name="Lori" /> 
        </React.Fragment>
        document.getElementById('root')
    );
        
        </script>
    </body>
#140

figured out the comma, it goes after </React.Fragment>, Now, there’s no error messages, and the screen is blank.

1 Like
#141

I tried a different browser, it worked!!

1 Like
#142

Here’s my solution, those console text debugger are super clear!!

 ReactDOM.render(
        <> <HelloMessage name="Kaliko" /> <HelloMessage name="Kaliko" /> </>, 
        document.getElementById("root"));
2 Likes
#143 
<><HelloMessage name="Ben" /> <HelloMessage name="Julia" /> </>,
1 Like
#144

@Malik Hello there, I was finishing the chapter on events but the events are not working and I could not find the proper place to post this.
Here is the part of the code where it started failing.
I wonder if this code is no longer accepted or if I should just move on and watch the next lesson, video with Dan talking about hooks?

handleClick(e) {
   // prevent form from reloading
   (e).preventDefault();
   console.log("you clicked");
   
   const randomPercentage = 0.995 + Math.random() * 0.01;
   this.setState(function(oldState){
    return {
      price: oldState.price * randomPercentage
    };
  });

 }

here is my file
https://github.com/brlojam4932/my-app.git

ERRORS FROM BROWSER

TypeError: e.preventDefault is not a function
Coin.handleClick
C:/Users/benX/Documents/ethereum_course_advanced/react/my-app/src/components/Coin/Coin.jsx:42
  39 |  
  40 | handleClick(e) {
  41 |   // prevent form from reloading
> 42 |    e.preventDefault();
     | ^  43 | 
  44 |   const randomPercentage = 0.995 + Math.random() * 0.01;
  45 |   this.setState(function(oldState){

  11 |   this.state = {
  12 |     price: this.props.price
  13 |   }
> 14 |   this.handleClick = this.handleClick(this); // this binding gives us access to handleClick, this.setState...
     | ^  15 | }
  16 | /*
  17 | componentDidMount() {

▶ 17 stack frames were collapsed.
Module.<anonymous>
C:/Users/benX/Documents/ethereum_course_advanced/react/my-app/src/index.js:7
   4 | import App from './App';
   5 | import reportWebVitals from './reportWebVitals';
   6 | 
>  7 | ReactDOM.render(
   8 |   <React.StrictMode>
   9 |     <App />
  10 |   </React.StrictMode>,

Module../src/index.js
http://localhost:3000/static/js/main.chunk.js:890:30
__webpack_require__
C:/Users/benX/Documents/ethereum_course_advanced/react/my-app/webpack/bootstrap:856
  853 | 
  854 | __webpack_require__.$Refresh$.init();
  855 | try {
> 856 | 	modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  857 | } finally {
  858 | 	__webpack_require__.$Refresh$.cleanup(moduleId);
  859 | }

 147 | 		);
  148 | 		hotCurrentParents = [];
  149 | 	}
> 150 | 	return __webpack_require__(request);
      | ^  151 | };
  152 | var ObjectFactory = function ObjectFactory(name) {
  153 | 	return {

 853 | 
  854 | __webpack_require__.$Refresh$.init();
  855 | try {
> 856 | 	modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  857 | } finally {
  858 | 	__webpack_require__.$Refresh$.cleanup(moduleId);
  859 | }

checkDeferredModules
C:/Users/benX/Documents/ethereum_course_advanced/react/my-app/webpack/bootstrap:45
  42 | 	}
  43 | 	if(fulfilled) {
  44 | 		deferredModules.splice(i--, 1);
> 45 | 		result = __webpack_require__(__webpack_require__.s = deferredModule[0]);
     | ^  46 | 	}
  47 | }
  48 |
#145

Disregard
I think I was missing the () at the end of the event prevent default function

event.preventDefault();