Passing props from parent to child in React JS is an important concept. Props are read-only properties that are sent from the parent components to the child components. We can pass props in from parent to child using React JS functional as well as class components
Table of Content
Steps to create the application:
Step 1: The below command will help you to start a new React app.
npx create-react-app testapp
Step 2: Next, you have to move to the ‘testapp‘ project folder from the terminal.
cd testapp
Step 3: Create a new components folder inside the src folder and create one component named child.js inside the component folder.
Project Structure:
Approach 1: Using Class Components
When users pass the data from parent to child using the class components, they can access inside the child component using ‘this.props.property_name‘.
Steps:
- Embed the child component to the parent component.
- Pass the data variable (props) with an assigned value to the child component as an argument while embedding it to the parent component.
- If a user wants to pass multiple data variables (props), all variable names should be unique.
- In the child component, access the data variable value using ‘this.props.variable_name’.
Example: Passing props from parent to child component in react usign class components App.js and child.js
Javascript
// FileName - App.jsimport React, { Component } from "react";import Child from "./components/child.js";// Child component embedded to parent component// with props valueclass App extends Component { render() { return ( <div> <h1>This is a parent component</h1> <ul> <li> <Child gfgcolor="green" usercolor="blue" /> </li> </ul> </div> ); }}export default App; |
Javascript
// FileName - components/child.jsimport React, { Component } from "react";// Accessing the props value using this.propsclass Child extends Component { render() { return ( <div> <h1>This is a child component</h1> <h1 style={{ color: this.props.gfgcolor }}> GeeksForGeeks </h1> <h1 style={{ color: this.props.usercolor }}> hello user </h1> </div> ); }}export default Child; |
Step to run the application: Open the terminal and type the following command.
npm start
Output: This output will be visible on http://localhost:3000/ in the Web browser.
Approach 2: Using Functional Components
To access properties from parent to child using a functional component, users don’t need to use ‘this.props‘ like class components. Users can access props value by writing variable names only.
Steps:
- Embed the child component to the parent component.
- Pass the props to the child component as an argument while embedding it to the parent component.
- In the child component, access the data variable value by writing the name or variable only.
Example:
Javascript
// FileName - App.jsimport React, { Component } from "react";import Child from "./components/child.js";// Parent component// Embedding child component inside itfunction App() { return ( <div> <h1>This is a parent component</h1> <ul> <li> <Child gfgcolor="green" usercolor="blue" /> </li> </ul> </div> );}export default App; |
Javascript
// FileName - components/child.jsimport React, { Component } from "react";// Passing props as a parameter// inside the child componentexport default function Child({ gfgcolor, usercolor }) { return ( <div> <h1>This is a child component</h1> <h1 style={{ color: gfgcolor }}> GeeksForGeeks </h1> <h1 style={{ color: usercolor }}> Welcome to Ggf! </h1> </div> );} |
Step to run the application:
Step 1: Open the terminal and type the following command.
npm start
Output: This output will be visible on http://localhost:3000/ in the Web browser.
