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
Glyphicon Rating Star component React JS get Tag Name and Inner Text on Click What is state in React? React JS Count number of checkboxes are checked How to use function inside JSX expression? Display JSON Data in React JS