To avoid the repeated HTML code, we created a separate child component. Let's take an example of a to-do list.

Here on the Todo-item.js page we once wrote the code for the checkbox inside the function and export it to the parent.

Inside App.js we can reuse the function Todoitem multiple times.

Here we have our To-do App 😍.

In order to deal with the dynamic data, we have to use Props which is used for passing data from one component to another. Take a look at the student info app to know how to use props.

App.js have the Function Student that passes a single prop called "info" which is an object for passing the data.

Student.js file receives this object in Props which is an argument of the Student function. So we if we console.log the value of props now, it will be the data that we passed from app.js.

👍