Anpu Ann John's Blog

Anpu Ann John's Blog

React Parent/Child Components #3

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

Screenshot (11).png

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

Screenshot (12).png

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

Screenshot (10).png

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.

Screenshot (13).png

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.

Screenshot (14).png

👍

#reactjs#jsx#learning
 
Share this