Skip to content

Instantly share code, notes, and snippets.

@orbitmechanic

orbitmechanic/gist:006eb50d714fc24c668b4ea9df1f81ab

Created August 25, 2020 01:42
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save orbitmechanic/006eb50d714fc24c668b4ea9df1f81ab to your computer and use it in GitHub Desktop.
Save orbitmechanic/006eb50d714fc24c668b4ea9df1f81ab to your computer and use it in GitHub Desktop.
Download ZIP
React: Render 2 sequential elements in one ReactDOM.render() call.
Raw
gistfile1.txt
<!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>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="hello-example"></div>
<script type="text/babel">
class HelloMessage extends React.Component {
render() {
return (
<div>
Hello, {this.props.name}!
</div>
);}}
// Render 2 serial calls to HelloMessage
ReactDOM.render(
<>
<HelloMessage name='Bob' />
<HelloMessage name='Alkazar' />
</>,
document.getElementById('hello-example')
);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment