How to get updated data into constructor in React

Question

// parent class
export default class HomeScreen extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      password: '',
      username:'',
      session: 'mani',
    };
  }

  authentication(){
    const self = this;
    axios.post('/api/users/login/', {
      password: this.state.password,
      username: this.state.username
    })
    .then(function (response) { 
      console.log(response);
      var sessionid=response.headers["set-cookie"][0].split('Secure,').pop().split(';').shift();
      self.setState({session: sessionid });
    })
    .catch(function (error) {
      console.log("Invalid username/password");
    });
  }

  render(){
    return(<Session sessid={this.state.session}/>);
  }
}

export default class Session extends Component {
  constructor(props){
    super(props);
    this.sessionVariable = this.props.sessid;
  }

  render(){    
    console.log(this.props.sessid);   // here i am getting updated value
    console.log("constructor "+this.sessionVariable);  // here i can't able to get updated value
    return (<View></View>);
  }
}

//child class 
import React, { Component } from 'react'
import { View, Text } from 'react-native'

export default class Session extends Component {
  constructor(props){
    super(props);
    this.state = {
        sessid: this.props.sessid
    }
  }

  componentWillReceiveProps(nextProps){
    const { sessid } = nextProps;

    if (sessid !== this.state.sessid) {
      this.setState({sessid});
    }
  }

  render(){
    console.log(this.props.sessid);     
    console.log("dummy"+this.state.sessid);

    return (<View></View>);
  }
}

How to get updated data into constructor in React Can you please give me the quick solution I need to update the data in constructor . Then only I am able to call the global variable throughout the all components

score 1 · Accepted Answer · answered Mar 28 '18 at 08:09

1

Add your props value inside the state and update it using componentWillReceiveProps ' lifecycle.

constructor(props) {
    super(props);
    this.state = {
      sessid: this.props.sessid;
    };
}

componentWillReceiveProps(nextProps){
    const { sessid } = nextProps;
    if(sessid !== this.state.sessid) {
        this.setState({sessid});
    }
}

answered Mar 28 '18 at 08:09

Ray

9,184
3
27
44

1

I need to updated props data in constructor. Then only i can use that global variable throughout the all components – Manikanta Mar 28 '18 at 08:22

Yossi · Answer 2 · 2018-03-28T09:02:50.270

0

In your constructor define a state:

constructor(props) {
    super(props);
    this.state = {
      sessionVariable: props.sessid;
    };
  }

Now, in your render():

console.log(props.sessid);
console.log("constructor "+ this.state.sessionVariable);

edited Mar 28 '18 at 09:02

answered Mar 28 '18 at 08:05

Yossi

5,577
7
41
76

I posted my recent code can you please check it once – Manikanta Mar 28 '18 at 08:35
Sorry, my mistake... Modify this.props.sessid to props.sessid. See updated code. If this doesn't work, console.log() the two values in both the constructor and in componentWillReceiveProps. – Yossi Mar 28 '18 at 09:04

score 0 · Answer 3 · answered Mar 28 '18 at 08:13

You can use states to check that current condition, let me explain it with an example,

This is the constructor with initial state for the data toggle

constructor(props){
  super(props);
  this.state = {
     toggle: true;
  }
}

Update the existing state, do this

this.setState({ toggle: false });

Make sure you are using the above code inside an arrow function or else bind the .this

If you want more info comment that below...

score 0 · Answer 4 · answered Mar 28 '18 at 08:16

The only reason that it doesn't show the updated value is because constructor is called only on the initial mount of the component and hence whatever class variable is set in constructor based on props, it won't be updated if the props change.

Second: setting a state or a class variable which is directly derivable from props is an anti pattern and you should just use props directly in render

export default class Session extends Component {

     render(){
            console.log(this.props.sessid);  


        return (
           <View>

         </View>
        )
     }
}

Still if you want to update the class variable based on, you can make use of componentWillReceiveProps function like

componentWillReceiveProps(nextProps) {
   if(nextProps.sessid !== this.props.sessid) {
      this.sessionVariable = nextProps.sessid;
      this.forceUpdate(); // called to cause a re-render
   }
}

or

export default class Session extends Component {

     constructor(props) {
        super(props);
        this.state = {
          sessionVariable: props.sessid
        }
     }
     componentWillReceiveProps(nextProps) {
       if(nextProps.sessid !== this.props.sessid) {
          this.setState({ sessionVariable: nextProps.sessid});
       }
     } 
     render(){
        console.log(this.state.sessionVariable);  
        return (
           <View>

         </View>
        )
     }
}

Sakshi Nagpal · Answer 5 · 2018-03-28T09:42:12.683

The constructor for a React component is called only before it is mounted. If you define some variable in constructor, it will store its value not reference and will not be re render again.

To change any value defined in constructor, you need to change it in updating phase of react (ComponentWillReceiveProps) and then call the

this.forceUpdate(); // to render the component

eg.

componentWillReceiveProps(nextProps) {
   if(this.props.sessid !== nextProps.sessid) {
      this.sessionVariable= nextProps.sessid;
      this.forceUpdate();
   }
}

Or you can directly use props in render function.

How to get updated data into constructor in React

5 Answers5