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
How to use React-Bootstrap component?
onClick Event binding and get event name in ReactJs
Glyphicon Rating Star component
How to render one component in another component in React JS?
Check which Radio button is Selected or Clicked
How to pass data from child component to its parent in ReactJS?
How to use arrow function in React stateless components?
Component displays Height and Width on window resize
Example of React Bootstrap Datatable
What is state in React?