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
3 Different Examples - How State Works in React? How to handle events using expressions inside JSX? How to use React-Bootstrap component? Using this keyword access component properties and methods React Components Working with Forms, Inputs and onChange Events in ReactJs Check checkbox is Checked or Unchecked Embed JavaScript Expressions in JSX React JS update Div content on click Display JSON Data in React JS