title: Constant placement in a ReactJS component
body: <p>Coming from a Java background, it would seem to me that the constant below should be defined within the class as an instance variable. However, this doesn't work and if I want to access a variable from different functions then the constant has to be defined outside of the component class. Can someone please explain this reasoning to me? Am I just missing something simple?</p>
  <p>I got this code from codeacademy.com.</p>
  <pre class="lang-js prettyprint-override"><code>import React from 'react';
  import ReactDOM from 'react-dom';
  
  const redPanda = {
    src: 'https://upload.wikimedia.org/wikipedia/commons/b/b2/Endangered_Red_Panda.jpg',
    alt: 'Red Panda',
    width: '200px',
  };
  
  class RedPanda extends React.Component {
    render() {
      return (
        &lt;div&gt;
          &lt;h1&gt;Cute Red Panda&lt;/h1&gt;
          &lt;img src={redPanda.src} alt={redPanda.alt} width={redPanda.width} /&gt;
        &lt;/div&gt;
      );
    }
  }
  
  ReactDOM.render(&lt;RedPanda /&gt;, document.getElementById('app'));
  </code></pre>