Display a heading and a list created with JSX in react

January 14, 2022

I started to learn React and i have a task to create a h1 with React.createElement and a list using JSX.I did this,but i dont understand how to display them on the website because ReactDom.render accepts only one component like i understood.
I should have this :

My code:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import reportWebVitals from './reportWebVitals';

const planetList = (
  <ul className='planets-list'>
    <li>Mercury</li>
    <li>Venus</li>
    <li>Earth</li>
    <li>Mars</li>
    <li>Jupiter</li>
    <li>Saturn</li>
    <li>Uranus</li>
    <li>Neptune</li>
  </ul>
)

ReactDOM.render(
  React.createElement(
    "h1",
    {
      style: {
        color: '#999',
        fontSize: '19px'
      }
    },
    "Solar system planets"
  ),
  planetList,
  document.getElementById('root')
);

I added planetList in ReactDom.render but there is an error in the console saying that:

react-dom.development.js:26091 Uncaught Error: Target container is not a DOM element.
    at Object.render (react-dom.development.js:26091:1)
    at Module../src/index.js (index.js:19:1)
    at Module.options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:24:1)
    at startup:7:1
    at startup:7:1

Can anyone give me a tip please what is wrong and how should i do it? Thanks in advance!

>Solution :

There are some ways to fix your problem, but the most simplest way is to put them in an array like this:

const planetList = (
  <ul className='planets-list'>
    <li>Mercury</li>
    <li>Venus</li>
    <li>Earth</li>
    <li>Mars</li>
    <li>Jupiter</li>
    <li>Saturn</li>
    <li>Uranus</li>
    <li>Neptune</li>
  </ul>
)

ReactDOM.render(
  [React.createElement(
    "h1",
    {
      style: {
        color: '#999',
        fontSize: '19px'
      }
    },
    "Solar system planets"
  ),
  planetList],
  document.getElementById('root')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Another solution could be to wrap them inside an single parent like this:

ReactDOM.render(<div>{React.createElement(
"h1",
{
  style: {
    color: '#999',
    fontSize: '19px'
  }
},
"Solar system planets" )}{planetList}</div>,
document.getElementById('root')
);

instead of div element you can use React.Fragment

Another solution could be create multiple component (this is common way in React) like this:

const PlanetList = ()=> {
  return (
   <ul className='planets-list'>
    <li>Mercury</li>
    <li>Venus</li>
    <li>Earth</li>
    <li>Mars</li>
    <li>Jupiter</li>
    <li>Saturn</li>
    <li>Uranus</li>
    <li>Neptune</li>
   </ul>
  )
}

const Header = ()=> {
  return React.createElement(
    "h1",
    {
      style: {
        color: '#999',
        fontSize: '19px'
      }
    },
    "Solar system planets"
  )
}

const App = ()=> {
  return (
    <React.Fragment>
      <Header/>
      <PlanetList/>
    </React.Fragment>
  );
}

ReactDOM.render(<App/>,
  document.getElementById('root')
);