what is Constructor?

• Constructor is a member of class.

• Constructor is a used to initialize the onject.

• Constructor automatically called when an object is created.

    export default class User extends Component {
        constructor (){
           super();
           console.log("This is from constructor")
       }
  
      render() {
        return (
          <div>
              <h1>hello</h1>
          </div>
        )
      }
    }
  

  Props in constructor

• If you do not call super(props) method, yhis.props will be undefined in the constructor and can lead to bugs.

export default class User extends Component {
    constructor (props){
       super(props);
       console.log(props.name)
   }

  render() {
    return (
      <div>
          <h1>hello {this.props.name}</h1>
      </div>
    )
  }
}

What is state with class component?

• A component's state can change over time whenever it changes, the component re-render.

  State write in constructor:-

export default class User extends Component {
    constructor (props){
       super(props);
       this.state = {
            name:"My name is state"
       }
   }

  render() {
    return (
      <div>
          <h1>hello {this.state.name}</h1>
      </div>
    )
  }
}

Change state:-

• For example we can make a button and user click at button ,name will be change are declaring in state .

• this.setState() is used to change the value of the state object.

• we can update state click on button

    export default class User extends Component {
        constructor (props){
           super(props);
    // create state
           this.state = {
                name:"My name is state"
           }
       }
    //change state
    changename(){
        this.setstate({
            name:"My name is setstate"
    })
    }
  
      render() {
        return (
          <div>
              <h1>hello {this.state.name}</h1>
              <input type="button" value="click" onClick={ () => this.changeName()}/>    
  
          </div>
        )
      }
    }
  

  State direct write:-

    export default class User extends Component {
  
       state = {
       name: 'Riya',
       age: 33,
       phone: 788765
     }
  
     changeName(){
       this.setState({
         name: "Siya",
         age: 0,
         phone: 0
       })
     }
     render() {
       return (
         <div>
           <h1>{this.state.name}</h1>
           <h1>{this.state.age}</h1>
            <h1>{this.state.phone}</h1>
  
           <input type="button" value="click" onClick={() => this.changeName()} />
         </div>
       )
     }
     }
  

State with multiple properties:-

 export default class User extends Component {
   constructor(){
     super();
                          // hum isme arry obj bhi de skte h
     this.state = {
       name: 'siya',
       age: 33,
      phone:788765
    }
   }

   changeName(){
         this.setState({
           name:"Nia",
           age: 0,
           phone:0
         })
   }

   render() {
     return (
       <div>
         <h1>{this.state.name}</h1>
        <h1>{this.state.age}</h1>
         <h1>{this.state.phone}</h1>

         <input type="button" value="click" onClick={ () => this.changeName()}/>
       </div>
     )
   }
 }

IMPORTANT POINTS:-

• State is similar to props, but it is private and fully controlled by the component.

• We can create state only in class component.

• It is possible to update the state.

• Every time the state of an object changes, react re-render the component to the browser.

Change props data in state

we can set props data to state.

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

       this.state = {
            name:this.props.name
       }
   }
//change state
changename(){
    this.setstate({
        name:"My name is setstate"
})
}

  render() {
    return (
      <div>
          <h1>hello {this.state.name}</h1>
          <input type="button" value="click" onClick={ () => this.changeName()}/>    

      </div>
    )
  }
}

There are 2 way of intialize state:-

1. with constructor,

2. without constructor.

Difference B/W Props and State

Props

• props get passed to the component.

• props are immutable or un-changeable.

State

• state is created and manage within the component.

• state are mutable or changeable.