Passing Data Through Props in React Js

In React JS, data can be passed from a parent component to a child component using props (short for properties). Props are passed as an object to the child component and are accessible within the child component as this.props.

Here is an example of passing data through props:

// Parent Component import React from 'react'; import ChildComponent from './ChildComponent'; class ParentComponent extends React.Component { render() { const data = { name: 'John Doe', age: 30, location: 'New York' }; return ( <ChildComponent data={data} /> ); } } // Child Component import React from 'react'; class ChildComponent extends React.Component { render() { return ( <div> <h2>{this.props.data.name}</h2> <p>Age: {this.props.data.age}</p> <p>Location: {this.props.data.location}</p> </div> ); } }

In this example, the ParentComponent is passing an object containing data as props to the ChildComponent. The ChildComponent is receiving the props and rendering the data in its own UI.

It is important to note that props are read-only and should not be modified within the child component. If you need to modify the data passed through props, you can create a state within the child component and use it to store and modify the data.

Passing data through props is a fundamental concept in React JS, and it allows you to create reusable and modular components that can be easily composed together to build complex user interfaces.