Display a heading and a list created with JSX in react

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'));