unable to use the variable declared outside the render function

Question

why is that when we declare a object outside the render function and using it in the return of the render function of a component causes an unexpected token error . If i declare the myStyle object inside the render function the below code works correctly.

import React , { Component } from 'react';


class Test extends Component {

  var myStyle={
      backgroundColor:"red",
      width:"100px",
      height:"100px",
      margin:"0 auto",
      marginTop:"50px"
  };

  render(){
    return(
       <div style={myStyle}>

      </div>
    );
  }
}

export default Test;

Thanks

Remove `var` or declare it outside of the class [see](https://stackoverflow.com/questions/22528967/es6-class-variable-alternatives) — Gabriel Bleu, Nov 13 '17 at 11:11
@Gabriel Bieu removing var gave me an undefined error , but declaring it outside the class worked - Thanks . — Shyam, Nov 13 '17 at 11:40
You can add it with babel [transform-class-properties](http://babeljs.io/docs/plugins/transform-class-properties/) — Gabriel Bleu, Nov 13 '17 at 12:41

Bojan Ivanac · Answer 1 · 2017-11-13T11:26:16.387

3

First, since you're using ES6 class syntax, you should use const or let to define your variables.

The best solution for you though would be to set the variable into the state of the component. So you can manipulate the state easily later and rerender the component when needed with this.setState();.

You would do it like this:

Inside the constructor method you would do -

constructor(props){
    super(props);

    this.state = {
        myStyle: {
            backgroundColor:"red",
            width:"100px",
            height:"100px",
            margin:"0 auto",
            marginTop:"50px"
        }
    }
}

After that, you can use the ES6 spread operator to apply the CSS to whatever component you like, easily.

edited Nov 13 '17 at 11:26

answered Nov 13 '17 at 11:14

Bojan Ivanac

1,170
8
17

1

const declared inside the constructor() wont be accessed outside – Jayabalaji J Nov 13 '17 at 11:22
@JayabalajiJ Ah, yes, my bad. I will edit that part out. – Bojan Ivanac Nov 13 '17 at 11:25
@Bojan Ivanac , Thanks for the explanation i will follow that in the future, so are we not supposed to declare variables outside the function . I tried using let and const but it throws me the same error . – Shyam Nov 13 '17 at 11:39
@Shyam Yeah, React is all about separating functionality. If you need a value to be used through the entire component, you use state. Variables are pretty much use only for the function they are written in. If you need that variable outside of the function you are writing it in, you would set that variable into the state and use it directly from the state. – Bojan Ivanac Nov 13 '17 at 11:42
@Bojan Ivanac Thanks a lot , I just needed a confirmation so that i can note this in my rule list. very well explained . – Shyam Nov 13 '17 at 11:47
Not sure if state is the best place to put static styles, consider importing your stylesheets [see](https://medium.com/@aghh1504/4-four-ways-to-style-react-components-ac6f323da822) – Gabriel Bleu Nov 13 '17 at 13:10
You actually can use variables. In the render() { let myVar = ' can go here'}; I'm not suggesting he put this specific array here. I'm just pointing out it's possible to use a variable. – FabricioG Nov 06 '18 at 00:16

unable to use the variable declared outside the render function

1 Answers1