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?

Does this answer your question? [Is there a way to render multiple React components in the React.render() function?](https://stackoverflow.com/questions/32577886/is-there-a-way-to-render-multiple-react-components-in-the-react-render-functio) — Emile Bergeron, Sep 15 '21 at 19:16

score 2 · Accepted Answer · answered Sep 15 '21 at 17:19

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.

score 0 · Answer 2 · answered Sep 15 '21 at 17:18

You need to wrap this Test and Test1 into some wrap

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

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

export default App;

score -1 · Answer 3 · answered Sep 15 '21 at 17:19

-1

try this

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

answered Sep 15 '21 at 17:19

Pierre

432
1
7

React - Render more than one Component

3 Answers3