React-JS : Initializing a global variable in componentDidMount but not getting its value in render

Question

Actually I am initializing a variable in componentDidMount and from there printing its value on console. So in the console I am getting the value of variable but when I print the value of variable from render I am getting "undefined".

var data    //declaring a global variable
export default class Schemes extends React.Component{
  constructor(){
  super();
  this.response = response

  componentDidMount(){
    /* Some Computation*/
    if(localStorage.getItem('xyz')){
      data = response
    }
  }

  render(){
    console.log("In render", data);
  }

Can you post your code please? Also, did you initialise the variable in componentWillMount (or the constructor for a class)? If it's undefined, there might your problem. — rrd
– rrd, Commented Nov 29, 2017 at 11:50
i have tried intialising the variable inside the constructor — Mayank Bansal
– Mayank Bansal, Commented Nov 29, 2017 at 11:56
Please update the question with the class snippet, showing all what you are asking. — Siya Mzam
– Siya Mzam, Commented Nov 29, 2017 at 12:08
componentDidMount runs after the initial render – therefore accessing localStorage occurs after your render function attempts to log the data from localStorage. — Wing
– Wing, Commented Nov 29, 2017 at 12:37

Cristian Muscalu · Accepted Answer · 2017-11-29 13:06:42Z

Just tested this and it works, but i wouldn't use global variables. I would use state instead.

import React, { Component } from 'react'

var data = 'my data'

class Test extends Component {
    constructor(props) {
        super(props)
        this.response = 'my response'
    }
    componentWillMount() {
        localStorage.setItem('test', 'w00f')

        if (localStorage.getItem('test')) {
            data = this.response
        }
        data = this.response
    }
    render() {
        console.log(data) //my response
        return (
            <div></div>
        )
    }
}

export default Test

Here is a better version using state:

import React, { Component } from 'react'

class Test extends Component {
    constructor(props) {
        super(props)

        this.state = {
            data: null,
            response: 'got reponse'
        }
    }

    componentWillMount() {
        localStorage.setItem('test', 'w00f')

        if (localStorage.getItem('test')) {
            this.setState({ data: this.state.response })
        }
    }
    render() {
        console.log(this.state.data) //got reponse
        return (
            <div></div>
        )
    }
}

export default Test

Collectives™ on Stack Overflow

React-JS : Initializing a global variable in componentDidMount but not getting its value in render

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related