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?
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.
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;try this
function App() {
return (
<>
<Test />
<Test1 />
</>
)
}