title: unable to use the variable declared outside the render function
body: <p>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.  </p>
  
  <pre><code>import React , { Component } from 'react';
  
  
  class Test extends Component {
  
    var myStyle={
        backgroundColor:"red",
        width:"100px",
        height:"100px",
        margin:"0 auto",
        marginTop:"50px"
    };
  
    render(){
      return(
         &lt;div style={myStyle}&gt;
  
        &lt;/div&gt;
      );
    }
  }
  
  export default Test;
  </code></pre>
  
  <p>Thanks </p>