Props

A prop is any input that you pass to a React component. Props are given as an object and are the first argument to a component function, like this:

export default function Greeting(props) {
    return <h1>Hello {props.name}</h1>
} 

import Greeting from "./components/Greeting.js"

export default App() {
    return <Greeting name={"Ali"} />;
}

ES6 has a new syntax called destructuring which makes props easier to work with:

export default function Greeting(props) {
    const { name } = props;
    return <h1>Hello {name}</h1>
} 

or

export default function Greeting({ name }) {
    return <h1>Hello {name}</h1>
} 

Aside: In class components, props are passed to the class constructor.

import React, { Component } from "react";

export default class Greeting extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return <h1>Hello {this.props.name}</h1>
    }    
} 

One crucial thing to know is that props are meant to be read-only. Therefore, components that receive props must not change them.

The Prop-Types library

First, install it:

yarn add prop-types

Then, import and use it:

import PropTypes from "prop-types";

export default function Greeting(props) {
    const { name } = props;
    return <h1>Hello {name}</h1>
} 

Greeting.propTypes = {
  name: PropTypes.string.isRequired
};

PropTypes helps to document and "type check" the props.