Simply wrap it in a div tag:
ReactDOM.render(
<div>
<HelloMessage name="Petra" />
<HelloMessage name="Christoph" />
</div>,
document.getElementById('root')
);
ReactDOM.render( <> <Ninja command = "Sarah"/><Ninja command = "Jack"/> </>, document.getElementById('magician') )
was playing around so the class is changed from HelloMessage to Ninja and the name is changed to command while the element is renamed magician
Wrapping both the 2 react elements within a html opened and closed tags will works.
ReactDOM.render(
<h3><HelloMessage name="Zsolt" /><br />
<HelloMessage name="Sarah" /></h3>,
document.getElementById('root')
);<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/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">
React.createElement(
'label', {
for: 'name-field'
}
)
class HelloMessage extends React.Component {
render() {
return (
<div>
Hello, {this.props.name} and Sarah. Not right I know lol kinda works, I did try to "Parent" the element and other things lol.
</div>
);
}
}
ReactDOM.render(
<HelloMessage name="YonTracks" />,
document.getElementById('root')
);
</script>
</body>
</html
ReactDOM.render(
<>
<HelloMessage name = "Markus" />
<HelloMessage name = "David" />
</>,
document.getElementById('root')
);
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<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 (
<h1>
Hello, {this.props.name}!
</h1>
);
}
}
ReactDOM.render(
<><HelloMessage name="Zsolt" /><HelloMessage name="Sarah" /> </>,
document.getElementById('root')
);
</script>
</body>
</html>
Each instance of HelloMessage component boils down to a React.createElement() call under the hood, which returns an object.
Therefore, we must wrap the two side by side HelloMessage components with a div as follows:
const hello = <div>
<HelloMessage name="Zsolt" />
<HelloMessage name="Sarah" />
</div>
Then we can render this div inside whatever dom element we want by simply selecting that DOM element and passsing it as the second argument to ReactDOM.render() method as follows
ReactDOM.render(hello, document.getElementById("root") );
Here custom JSX element created above is passed in as the first argument (it is WHAT we want to render) and the element in which we want to render this custom JSX element is passed in as the second argument (it is WHERE we want to render the first argument; it is assumed the html page has some container, maybe a div, with id=“root” attribute where we can render our custom elements).
1 Like
ReactDOM.render(
[<HelloMessage name="Jay" />,
<HelloMessage name="Zsolt" />,
<HelloMessage name="Bobby" />],
document.getElementById('root'));
Here’s my solution:
ReactDOM.render(
<><HelloMessage name="Diego" />
<HelloMessage name="Alexander" /></>,
document.getElementById('root'),
);
Here is my solution based on 2 or more React elements to only 1 render call:
JSX
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/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">
function HelloMessage(props) {
return <h2>Greetings, {props.name}</h2>;
}
function Reveal() {
return (
<div>
<HelloMessage name="Zsolt" />
<HelloMessage name="Sarah" />
</div>
);
}
ReactDOM.render(
<Reveal />,
document.getElementById('root')
);
</script>
<!--
Note: this page is a great way to try React but it's not suitable for production.
It slowly compiles JSX with Babel in the browser and uses a large development build of React.
Read this section for a production-ready setup with JSX:
https://reactjs.org/docs/add-react-to-a-website.html#add-jsx-to-a-project
In a larger project, you can use an integrated toolchain that includes JSX instead:
https://reactjs.org/docs/create-a-new-react-app.html
You can also use React without JSX, in which case you can remove Babel:
https://reactjs.org/docs/react-without-jsx.html
-->
</body>
</html>
Please let me know if this is ok or if it could be done more efficiently in a different way. Thanks 
const hello = <div>
<HelloMessage name="Zsolt" />
<HelloMessage name="Sarah" />
</div>
ReactDOM.render(
<><HelloMessage name="Zsolt" />
<HelloMessage name="Sarah" /></>,
document.getElementById('root'),
);
ReactDOM.render(
<><HelloMessage name="Jayce" /> <HelloMessage name="Sarah" /></>,
document.getElementById('root')
);
ReactDOM.render(
<>
<HelloMessage name="Zsolt" /><HelloMessage name="Sarah" />
</>,
document.getElementById('root')
);
ReactDOM.render(
<>
<HelloMessage name="Pavlo"/>
<HelloMessage name="Sarah"/>
</>,
document.getElementById('hello-example')
);
class HelloMessage extends React.Component {
render() {
return (
<div>
Hello, {this.props.name}
</div>
);
}
}
ReactDOM.render(
<div>
<HelloMessage name={"Zsolt"} />
<HelloMessage name={"Sarah"} />
</div>,
document.getElementById('root')
);
</script>
ReactDOM.render(
<><HelloMessage name="Zsolt"/><HelloMessage name="Someone else"/><HelloMessage name="Sarah"/></>,
document.getElementById('root')
);
♂
ReactDOM.render(
<>
<HelloMessage name="Elin" />
<HelloMessage name="Sara" />
</>,
document.getElementById('root1')
);
1 Like
for anyone intrested in a more simplified and modern way of doing this in react consider hooks and functional components over class based components.
HelloMessage.js
import React, {useState} from "react"
const HelloMessage = ({name}) => {
return(
<div>Hello {name}</div>
)
}
export default HelloMessage
then we import tis components into app.js
import React from "react"
import HelloMessage from "../components/HelloMessage"
function App() {
return(
<div>
<HelloMessage name={"My Name"}/>
</div?
)
}
this more modern way is much easier to understand in my opion than traditional class components. Anyone interested should look into hooks and functional components
1 Like
<script type="text/babel">
class HelloMessage extends React.Component {
render() {
return (
<div>
Hello: {this.props.name},
Hello: {this.props.name2}
</div>
);
}
}
ReactDOM.render(
<HelloMessage name="Taylor" name2="Maria"/>,
document.getElementById('root')
);
</script>
1 Like
<>
<HelloMessage name="Zsolt" />
<HelloMessage name="Sarah" />
</>
1 Like