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>
} 

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

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 mean to be read-only. Therefore, components that receive props must not change them.

The prop-types library

First, install it:

npm install 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 is made to "type check" the props.