What are props in React?

Props are inputs to components. They are single values or objects containing a set of values that are passed to components on creation similar to HTML-tag attributes. Here, the data is passed down from a parent component to a child component.

The primary purpose of props in React is to provide following component functionality:

1. Pass custom data to your component.
2. Trigger state changes.
3. Use via

   this.props.reactProp

   inside component's

   render()

   method.

For example, let us create an element with

reactProp

<Element reactProp={"1"} />

This

reactProp

props.reactProp;

For example, the usage of props in function component looks like below:

import React from "react";
import ReactDOM from "react-dom";

const ChildComponent = (props) => {
  return (
    <div>
      <p>{props.name}</p>
      <p>{props.age}</p>
      <p>{props.gender}</p>
    </div>
  );
};

const ParentComponent = () => {
  return (
    <div>
      <ChildComponent name="John" age="30" gender="male" />
      <ChildComponent name="Mary" age="25" geneder="female" />
    </div>
  );
};

The properties from props object can be accessed directly using destructing feature from ES6 (ECMAScript 2015). It is also possible to fallback to default value when the prop value is not specified. The above child component can be simplified like below.

const ChildComponent = ({ name, age, gender = "male" }) => {
  return (
<div>
  <p>{name}</p>
  <p>{age}</p>
  <p>{gender}</p>
</div>
  );
};

Note: The default value won't be used if you pass

null

0

undefined

import React from "react";
import ReactDOM from "react-dom";

class ChildComponent extends React.Component {
  render() {
return (
  <div>
    <p>{this.props.name}</p>
    <p>{this.props.age}</p>
    <p>{this.props.gender}</p>
  </div>
);
  }
}

class ParentComponent extends React.Component {
  render() {
return (
  <div>
    <ChildComponent name="John" age="30" gender="male" />
    <ChildComponent name="Mary" age="25" gender="female" />
  </div>
);
  }
}