Quick Contact


    State V/S Props

    Props are like argument to a function. When you want to render the components in react, pass to the props. For Example we have “Counter App”. Props are used as like for passing the functions. Props are like where to start the counter and when to render the counter is declared in props form. As initial count is 0, so we pass it to prop. Props are passed into a component. Props are used when you want to pass multiple values or variables in the function or pass different things to constructor. It is handling outside the component.

    State is something inside the component. When we pass initial count the initial state is saved which is known as state of component. When counter increased or decreased then at every value its state is saved. When the state is changes of the component then that section of application is re-render. State is needed to be saved when application is re-render or update by user. As in counter we have different counts which are needed to be saved as a state or state is updated at every input by the user. So state is very useful for developer to check that output of application after update and state before updation. It is handling inside the component.

    State Props
    State is used as this.state.name In props syntax is this.props.name
    States can be define in component itself. In props properties are pass from parent components.
    State is updated and set by object. In props the view is determined upon the creation and which remains static
    Both Component class and compose components accessible with different representation. Same with props
    State can get initial value from parent component. Props also get initial value from parent component.
    In state change cannot be done by parent component In props change can be done by parent component.
    Default values can be set inside component. Same with props.
    State can be changed inside component. Props cannot be changed inside component.
    In state initial value can be set for child components Same with props
    State cannot be change in child components. Props can change in child components
    Let’s take example by using props and state
    		Class petlist extends React.component {
    		  Constructor (props) {
    		     Super(props);
    		     This.state = {
    		         Pets: pets 
    		};
    		Render () {
    		   Return {
    		 < div>
    		     < h3>Pets List: < /h3>
    		       {
    		     This.state.pets.map(v,idx) => {
    		          Return < SinglePet key={idx}
    		           Name={v,name}
    		            Image={v,image}
    		           Desc={v,desc}
    		       />
    		      })
    		    }
    		    < /div>
    		)
    		}
    		}
    		Class SinglePet extends React.Component {
    		    Render () {
    		      Return (
    		      < div>
    		          < h3>{this.props.name}< /h3>
    		       < img src={this.props.image} alt=””/>
    		         < p>{this.props.desc}< /p>
    		  < /div>
    		)
    		}
    		}
    	

    Here pets and SinglePet are states whereas passing name, image, desc are props.

    Copyright 1999- Ducat Creative, All rights reserved.