Quick Contact


    React Props

    When React sees element representing user defined component, then JSX attribute is passed to the component as an single object, we call this object “props”.

    		Function Student (props) {
    		Return (< div>
    		             < h1>Hello, {props.name} < /h1>;
    		             < h2>Your Roll: {props. roll} < /h2>;
    		              < /div>
    		}
    		ReactDOM.render ( < Student name=”Rahul” roll=”101”/>, document.getElementById (‘root’));
    	

    So here Props are-:

    		Props= { name:”Rahul”,
                   Roll:”101”
    		}
    	

    For rendering another JavaScript expression as props is-:

    ReactDOM.render ( < Student name=”Rahul” roll= (100+1)/>, document.getElementById (‘root’));

    If you pass no value for a prop, it defaults to true. Small Expression for props-:

    		Import React from “react”;
    	      Const Student = props => {
    	     Return (
    	       < div>
    	          < h1>Hello< /h1>
    	           < h2>Your Roll-: < /h2>
    	               < /div>
    	);
    	};
    	

    When class extends

    		Class Student extends React. Component {
    		Render() {
    		Return (< div>
    		          < h1>Hello,(this.props.name)< /h1>;
    		          < h2>Your Roll: {this.props.roll}< /h2>;
    		 < /div>
    		}}
    		ReactDOM.render ( < Student name=”Rahul” roll=”101”/>, document.getElementById (‘root’));
    	

    Props are always read only feature. All react components must act like pure functions with respect to their props-:

    Pure Function
    		Function sum (a, b) {
    		Return a+b;
    		}
    	
    Impure Function
    		function withdraw (account, amount)
    		{
    		Account.total -= amount;
    		}
    	
    Example of Props
    		Class Welcome extends React.Component {
    		   Render () {
    		    Return < h1>hello {this.props.name}< /h1>;
    		}}
    	

    In props property passed to the component in a similar way as argument passed to function as-:

    		Function Hello(props) {
    		  Return < h1>hii {props.name}< /h1>
    		}
    	

    So if props are not able to pass even then it can be set as default prop. As you have to make some property by adding “defaultprops” to “Hello” class.

    		Class hello extends React.Component {
    		 Render() {
    		  Return < h1>hii {this.props.name} < /h1>;
    		}}
    		Hello.defaultprops = {
    		  Name: “world”,
    		};
    	

    Props are immutable as these are not changed during components lifecycle. You are able to change using “setProps” and “replaceProps” but these have been deprecated. Props helps to pass properties from one component to another component. Let’s take another example of write “Hello world”. First of all rendering of react is most important function performed as-:

    		ReactDOM.render(
    	    < h1> Props< /h1>,
    	     Document.getElementById(‘root’)
    	);
    	
    Now create functional component
    		Function App(){
    		Return (
    		< h1>React props< /h1>
    		)}
    		ReactDOM.render(
    		    < App title=”Example of React Prop”/>,
    		    Document.getElementById(‘root’)
    		);
    	

    Now to access the function pass the props in function.

    		Function App(props){
    		Return (
    		   < h1>{props.title}< /h1>
    		   )
    		}
    		ReactDOM.render(
    		    < App title=”React Props Example”/>,
    		    Document.getElementById(‘root’)
    		);
    	
    And Output is shown as-:
    React Props

    For more properties you can add condition by putting question mark in case of title is there or not. Like title is there then title will be display or if not then NA will be shown. So to give the condition to check the title following syntax is followed-:

    		Function App (props){
    		Return (
    		   < h1>{props.title ? props.title : “NA”}< /h1>
    		   )
    		}
    		ReactDOM.render(
    		    < App title=””/>,
    		    Document.getElementById(‘root’)
    		);
    	
    OUTPUT IS SHOWN AS IN ABSENCE OF TITLE-:
    React Props

    So using props more you can add the properties as below-:

    1. You can create classname=”btn” and can pass the button.
    2. Styling is also done in file in H1 tag, It can be done as-:
    3. Style = {{color: “red”,Background: “white”}}

    4. You can also pass the number through props as-:
    5. 			< h1>
      			{props.example + 1}
      			< /h1>
      			 ReactDOM.render(
      			< App
      			Example = {2}
      			/>
      		

    Copyright 1999- Ducat Creative, All rights reserved.