React Props with example

React Props with example

• Props are the special keyword in react which is stand for properties
• Props may be used to make communication between parent to child. It is a unidirectional communication it means the data may be flow from parent to child only.
• Props can be applied in a functional component by passing props as an argument in the function
• You can pass data in React by defining custom HTML attributes to which you assign your data with JSX syntax.

                        <Greeting welcome={greeting} />

                        It may be accessed by  return <h1>{this.props.greeting}</h1>; 

• Value of the props can we access through the key-value pairs
• HTML attributes are used to set props values and share.
• React props are read-only by nature that is why react state comes into play. While we are passing data from parent component to child component we are just passing data we are not capable to update the state of data in case of props

Parent Component(App.JS)

const element = <Mobile brand="Samsung" />;

Child Class Component(Mobile.js):- 
class Mobile extends React.Component {
  render() {
    return <h2>My Mobile is brand of {this.props.brand}!</h2>;
  }
}

Object value may also transferred using Props

class Mobile extends React.Component {
  render() {
    return <h2>I am using Mobile of Model  {this.props.brand.model}!</h2>;
<h2>Mobile  {this.props.brand.name} , I m using</h2>;
  }
}

class App extends React.Component {
  render() {
    const mobileinfo = {name: "Samsung", model: "2021"};
    return (
      <div>
      <h1>Which model you are using?</h1>
      <Mobile  brand={ mobileinfo } />
      </div>
    );
  }
}

Use of Props in Constructor function

If we are using a class component in our application and we have the constructor in our class. In this case, we have to pass props as constructor function argument and we have to call super method where props are also the argument of the super method.

class Mobile extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return <h2>I am using Mobile {this.props.model}!</h2>;
  }
}

Complete Example of Video

Welcome.JS

import React from 'react'

export default function Welcome(props) {
    return (
        <div>
            <h2>Welcome {props.name} and Your Location is {props.address}</h2>
            <h2>Full Details</h2>
            <h3>{props.details.fname} / {props.details.qualification}</h3>
        </div>
    )
}

ClassEx.JS

import React, { Component } from 'react'

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

    render() {
        return (
            <div>
 <h2>Welcome {this.props.name} and Your Location is {this.props.address}</h2>

            </div>
        )
    }
}

App.JS

import logo from './logo.svg';
import './App.css';
import Greeting from './Greeting';
import Welcome from './components/Welcome';
import ClassEx from './components/ClassEx';


function App() {
  const address  = "Jaipur";
  const fulldetails = {fname: "Sharma", qualification:"engg"};
  return (
    <div>
      <Welcome name="Yogesh" address={address} details={fulldetails} />
   
      <ClassEx name="Yogesh" address={address} details={fulldetails} />

    </div>
  )
}

export default App;