Props

Like other component frameworks, React supports parent-child component interaction by using props. Every component in React has an accessible props property, which is a key-value object containing all the data passed in from the parent component.

 

Consider the following example:

import React from 'react';

class Child extends React.Component {
  render() {
    return (
      <span>Hello {this.props.greet}</span>
    );
  }
}

export default Child;

The Child component is a simple component that renders a span element with some greeting text. Importantly, it uses the props object while rendering, meaning it expects a text property to be passed down from the parent. To pass down expected props, a parent component simply needs to specify those as simple HTML-like attributes, as follows:

import React from 'react';
import Child from './Child';

class Parent extends React.Component {
  render() {
    return (
      <div>
        <Child text='Props and State' />
      ...