Golang React JS Technology Blog

How to pass properties from parent component to child component in React JS?

React supports props—short for properties which allows a parent component to pass data to its children, which they can use for manipulation and render their content. Props are defined by adding properties (similar to data-attributes) to the custom HTML elements that apply components. The name of the property is the name of the prop, and the value can be a static integer, string, float or an expression.

Create React App

Type the following command to create a new react app:

npx create-react-app demo

Now, go to the project folder:

cd demo

Now, update default App.js with below code snippet

src\App.js

import React, { Component } from 'react';
import Area from './components/Area';
 
class App extends Component {
  render() {
    return (
      <div>
        <Area length="100" breadth="200" />
      </div>
    );
  }
}
 
export default App;

Create new Area component and type out the below code into Area.js

src\components\Area.js

import React, { Component } from 'react';
 
class Area extends Component {
  render() {
    return (
      <div>
        Area: {this.props.breadth * this.props.length}
      </div>
    );
  }
}
 
export default Area;

We have provided two props, length and breadth, to Area component.

Most Helpful This Week
Create Functional Component using ES6 Arrow Syntax How to render raw HTML content in React JS? How to render one component in another component in React JS? Check which Radio button is Selected or Clicked onClick Event binding and get event name in ReactJs React Props