State vs Props in ReactJs

State

State of component is an object that holds some information that may change over the life time of component.we can share the data from state in single class component.

A state is a variable which exists inside a component, that cannot be accessed and modified outside the component and can only be used inside the component. Works very similarly to a variable that is declared inside a function that cannot be accessed outside the scope of the function in normal javascript. 

State is a mutable object

class FakeComponent extends React.component{

  state = {

      name : 'Mukul';

   }

  render(){

      return <div>Hello {this.state.name}</div>

   }

} 

// simple js function

const FakeFunction = () => {

  let name = 'Ashish';

  console.log(`Hey ${name}`);

}

Props

Props are basically one kind of global variable or object. react allows us to pass the information to other component using props and passing value will be either state value or as a argument.

A simple component and then we passes the props as attributes and then access them inside our component using this.props. So props makes components reusable by giving components the ability to receive data from the parent component in the form of props.


Props are immutable object.

// component 

class FakeComponent extends React.component{

 render(){

    return <div>Hello {this.props.name}</div>

    }

}

// passing the props

<FakeComponent name='Alice' />

<FakeComponent name='Joy' />

• State can be used inside the class component & props doesn't have this limitation.
• Props are set by parent component but state are set by event handler.

Introduction to Props in ReactJs

Props

Props are basically one kind of global variable or object. react allows us to pass the information to other component using props and passing value will be either state value or as a argument.

Props are immutable object.

We can use props in different component as a different way.

In class component  we use this.props in class based component.

import React from 'react';

import ReactDOM from 'react-dom';

  

class DemoComponent extends React.Component{

    render(){

        return(

  

                <div>

                    {/*accessing information from props */}

                    <h2>Hello {this.props.user}</h2>

                    

                </div>

            );

    }

}

  

ReactDOM.render(

    // passing props

    <DemoComponent user = "Alice" />, 

    document.getElementById("root")

);

In functional component   

We dont use this.props in functional component and use props in functional component.

import React from 'react';

import ReactDOM from 'react-dom';

  

// functional component to illustrate props

function DemoComponent(props){

    return(

        <div>

            {/*accessing information from props */}

            <h2>Hello {props.user}</h2>

            

         </div>

    );

}

  

ReactDOM.render(

    // passing props

    <DemoComponent user = "Alice" />, 

    document.getElementById("root")

);

Note: Props are read-only. We are not allowed to modify the content of a prop. Whatever the type of Component is – functional or class-based, none of them is allowed to modify their props.

Default props:

It create a object of class based on class name called as defaultProps. By default it set the value if no value is assigned. and provide the value as a props.

import React from 'react';

import ReactDOM from 'react-dom';

  

// Component

class ExampleClass extends React.Component{

    render(){

        return(

                <div>

                    {/* using default prop - title */}

                    <h1>This is {this.props.title} Website!</h1>

<h1>User is {this.props.name} </h1>

<h1>User is {this.props.map(function nameiter(item, i){

return (item + (i+1))

})</h1>

                </div>

            );

    }

}

  

// Creating default props for 

// ExampleClass Component

ExampleClass.defaultProps = {

    title: "Blogger",

name: ["Ashish", "Kumar"]

}

  

ReactDOM.render(

    <ExampleClass />, 

    document.getElementById("root")

);

Output

This is Blogger Website !

AshishKumar

Ashish1Kumar2

Props validation

import React from 'react'; class App extends React.Component { render() { return ( <div> <h3>Array: {this.props.propArray}</h3> <h3>Bool: {this.props.propBool ? "True..." : "False..."}</h3> <h3>Func: {this.props.propFunc(3)}</h3> <h3>Number: {this.props.propNumber}</h3> <h3>String: {this.props.propString}</h3> <h3>Object: {this.props.propObject.objectName1}</h3> <h3>Object: {this.props.propObject.objectName2}</h3> <h3>Object: {this.props.propObject.objectName3}</h3> </div> ); } } App.propTypes = { propArray: React.PropTypes.array.isRequired, propBool: React.PropTypes.bool.isRequired, propFunc: React.PropTypes.func, propNumber: React.PropTypes.number, propString: React.PropTypes.string, propObject: React.PropTypes.object } App.defaultProps = { propArray: [1,2,3,4,5], propBool: true, propFunc: function(e){return e}, propNumber: 1, propString: "String value...", propObject: { objectName1:"objectValue1", objectName2: "objectValue2", objectName3: "objectValue3" } } export default App;

Output

Array: 12345

Bool:  true...

Func: 3

Number: 1

String: String value..