Articles → REACT.JS → props in react.js

props in react.js






Purpose





Example






import React, { Component } from 'react';
import ReactDOM from 'react-dom'

class ChildComponent extends React.Component {
    render() {
        return <h2>This is {this.props.property} attribute of the child component</h2>;
    }
}

class ParentComponent extends React.Component {

       render() {
        return (
            <div>
                <ChildComponent property="test"/>
            </div>
        );
    }
}

ReactDOM.render(<ParentComponent />, document.getElementById('root'));







Output


Picture showing the output of props in react.js

Click to Enlarge


Difference between state and prop


  1. State is private to the component whereas props are used to pass data from one component to the other.
  2. Props are read-only.



Posted By  -  Karan Gupta
 
Posted On  -  Saturday, August 7, 2021
 
Updated On  -  Tuesday, August 10, 2021

Query/Feedback


Your Email Id  
 
Subject 
 
Query/FeedbackCharacters remaining 250