ReactJS, a widely used JavaScript library, employs Props, enabling the passing of data from parent to child components. Props are read-only, facilitating data access by child components via ‘this.props.’
The ReactJS library has two components:
Steps to Create the React Application:
Step-1: Create a React Application And Installing Module using the following command:
npx create-react-app projectfoldername
Step-2: Move into the project folder using the following command:
cd projectfoldername
Project Structure:
The updated dependencies in package.json file will look like:
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4",
}
Functional component
Now, to reference a specific object to pass down as properties, you first need to create the object and assign it to a variable within the component’s code. You can then pass this object down as a prop to child components. For this write down the following code in the app.js file present inside the src folder.
Example: Now write down the following code in the App.js file.
// React functional component here // act as a parent component function App() {
// The data we will send as props
// in child component
const userData = {
name: "Geeks for Geeks" ,
age: 20,
email: "geeksforgeeks@example.com" ,
};
return (
<div>
<h1>User Profile</h1>
<Profile data={userData} />
</div>
);
} // React functional compont here works as // a child compont accepting the props function Profile(props) {
return (
<div>
<h2>{props.data.name}</h2>
<p>Age: {props.data.age}</p>
<p>Email: {props.data.email}</p>
</div>
);
} // Exporting the component export default App;
|
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output:
Class component:
- Follow the above steps for project setup.
- Suppose you have a parent component called App which has an object called person as its state.
- Now, In the ChildComponent, we can access the person object using the props passed down to it, and render its properties as needed.
Example: Now write down the following code in the App.js file.
import React, { Component } from "react" ;
// React class component here act // as a parent component class App extends Component { // state we will send in child component
state = {
person: {
name: "Geeks for Geeks" ,
age: 23,
email: "gfg@example.com" ,
},
};
render() {
const { person } = this .state;
return (
<div>
<h1>App Component</h1>
// sending the state in child component
<ChildComponent person={person} />
</div>
);
}
} // React class component here act as a child component class ChildComponent extends Component { render() {
const { name, age, email } = this .props.person;
return (
<div>
<h2>Child Component</h2>
<p>Name: {name}</p>
<p>Age: {age}</p>
<p>Email: {email}</p>
</div>
);
}
} // Exporting the component export default App;
|
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output: