Reactjs - accessing variables

Question

How can I access variable bvar in the code below? Also, when would I declare variables as:

a) state

b) between constructor() and render()

c) inside render() - my understanding is that I'd set them here if a variable can change and I'd like to set it each time a component renders. So if I know something is not changing at all, it'd be a const and where would I set it?

import React, {Component} from 'react';

export default class App extends Component {
  constructor(props) {
    super();
    // Set the initial grid in
    this.state = {
      value: 4,
      xsquares: 10,
      ysquares: 10
    };

    var bvar = "cat";
  }
  render() {
    var avar = [
      "Hydrogen",
      "Helium",
      "Lithium",
      "Beryllium"
    ];

    let cvar = "dog";

    return (
      // Add your component markup and other subcomponent references here.
      <div>
        <h1>Hello, World! {this.state.value}</h1>
        <h2>{this.state.xsquares}</h2>
        <h3>{avar[0]}</h3>
        <h4>{this.bvar}</h4>
        <h3>{cvar}</h3>
      </div>

    );
  }
}

All variables display apart from bvar.

Piotr Berebecki · Accepted Answer · 2016-09-21 22:40:04Z

11

bvar declared inside your constructor is not accessible inside render() method. It is out of scope. As answered by Caleb, you would need to use instance variable: this.bvar = "cat"

When would I declare variables as:

a) state

Use state if changes in data should affect the view (e.g. store user location in state so that current temperature can be established and rendered based on this location). Also, state can be used in the logic found in other methods of your component (e.g. fetch background image based on user's current location).

b) between constructor() and render()

Variables declared inside other methods of your component are often used to temporarily store data coming, for example, from the state, props, input fields etc. These variables are only accessible within those methods, e.g.

constructor() {
...
}

onInputText() {
    var accountNumber = this.refs.inputField.value;
    this.props.handleInputText(accountNumber);
}

render() {
...
}

c) inside render()

Variables are often declared inside render() to temporarily store data held in state or props. These variables are only accessible inside render(), e.g.

class WelcomeScreen extends React.Component {
    render() {
        var userName = this.props.userName;
        return (
            <div>
                Hello, { userName }!
            </div>
        );
    }
}

edited Sep 21, 2016 at 22:40

answered Sep 21, 2016 at 22:15

Piotr Berebecki

7,4684 gold badges37 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

SakthiSureshAnand Over a year ago

How to clear or reinstate the variable which is created inside the render() . Is it possible or is it best practice ? ., could you please explain?

Asma Rahim Ali Jafri Over a year ago

Can you please give an explanation in light of Functional Components? I did not find anything helpful enough.

Caleb Anderson · Accepted Answer · 2016-09-21 21:22:03Z

4

To define bvar within the constructor you would need to declare it as this.bvar = "cat"

answered Sep 21, 2016 at 21:22

Caleb Anderson

1215 bronze badges

Comments

Talha · Accepted Answer · 2019-07-29 16:20:14Z

0

    import React, {Component} from 'react';

export default class App extends Component {
  constructor(props) {
    super();
    // Set the initial grid in
    this.state = {
      value: 4,
      xsquares: 10,
      ysquares: 10
    };

    this.bvar = "cat";
  }
  render() {
    var avar = [
      "Hydrogen",
      "Helium",
      "Lithium",
      "Beryllium"
    ];

    let cvar = "dog";

    return (
      // Add your component markup and other subcomponent references here.
      <div>
        <h1>Hello, World! {this.state.value}</h1>
        <h2>{this.state.xsquares}</h2>
        <h3>{avar[0]}</h3>
        <h4>{this.bvar}</h4>
        <h3>{cvar}</h3>
      </div>

    );
  }
}

answered Jul 29, 2019 at 16:20

Talha

11 bronze badge

Collectives™ on Stack Overflow

Reactjs - accessing variables

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related