React - Render more than one Component

Question

I have the typical index.js that calls App.js

index.js

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

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

App.js

import './App.css';
import Test from './Components/test'
import Test1 from './Components/test1'

function App() {
  return (
<Test/>,
<Test1/>
    );
}

export default App;

When building App.js i wanted to render 2 components Test and Test1

When i run this code only one of the components gets rendered. In this case only Test1 is rendered. If i switch the order only Test is rendered

Is there any way that i can render 2 components?

Answer 1

You can only render one component, so an approach would be to wrap them in one. For example, in a React Fragment, like so:

import { Fragment } from 'react'

...

return (
  <Fragment>
    <Test />
    <Test1 />
  </Fragment>
)

Fragment is just a wrapper, it doesn't provide any functionality. Alternatively, you can wrap your components like so:

return (
  <>
    <Test />
    <Test1 />
  </>
)

The result would be the same.