Introduction to props:

Prop is basically a short form of Properties. Generally we assume that every component that we create may have some sort of properties. These properties are defined in a certain way so that these can be transferred to another component. In short, Props are a kind of inter-component communication system.

Let us understand it with an example:
Consider you are creating a page where five cards are to be displayed with different information in each.

We’ll first create a component for a card.
After that we’ll use five instances of that component in Index.js
For every instance, we’ll provide different information using some attributes.
Finally in the original component file, we’ll access all that information using Props.
Every attribute will be accessed by the notation: prop.keys

Features and advantages of props:

Props stand for properties.
Props are passed to components like- function arguments.
Props can be used in both functional and class components.
Props can be passed to components only via parent to child.
Props data is immutable i.e. once set, props can't be changed.

Creating and using props:

As discussed earlier, Props are simple properties that influence the way a component is rendered on screen. Let us now create a component that will get some props passed by another component.

Index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Second from './Second';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
  <React.StrictMode>
    <Second />
  </React.StrictMode>,
  document.getElementById('root')
);
reportWebVitals();

Second.js

import React, {Component} from 'react';
import First from "./First";

class Second extends Component {
    render(){
        return(
            <div>
                <First attr="Shashi"/>
            </div>
        );
    }
}

export default Second;

First.js

import React, {Component} from 'react';

class First extends Component {
    render(){
        return(
            <div> <h2>Hi! {this.props.attr}</h2> </div>
        );
    }
}

export default First;

Here we see that there is a file Index.js that is rendering the component on screen.

Another file Second.js (working here as parent) holding the definition of component is passing an attribute attr as a prop.

Finally First.js (working here as child) is utilizing that prop for UI by using this.prop.attr statement.

NOTE: While using functional components, we utilize props by using prop.key statement whereas while working on class components, we use this.prop.key statement.