How to embed two components in one component ?
In the ReactJS Components, it is easy to build a complex UI of any application.
We can divide the UI of the application into small components and render every component individually on the web page.
React allows us to render one
component inside another component.
It means, we can create the parent-child relationship between the 2 or more components.
Steps :
1. Create a new components folder inside the
src folder and create two components named child1.jsx and child2.jsx files inside it.
2. export the two child components
3. and import 2 childs into App.js
import Child1 from './components/child1';
import Child2 from './components/child2';
4. Now, we will change the default code of the App.js component file.
Also, we will embed the child1 and child2 components inside the App component.
import React, { Component } from 'react';
import Child1 from './components/child1';
import Child2 from './components/child2';
class App extends Component {
render() {
return (
div
div This is a parent component div
Child1
Child2
div
);
}
}
export default App;