title: ReactJS - What is difference between component state and class variable?
body: <p>I think it works differently but I don't know how it works.</p>
  <h1>1. Using class variable</h1>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>export default class Test extends Component {
    constructor() {
      this.active = false;
    }
  
    render() {
      this.active = this.props.name === 'Dan'? true : false;
      return (
        &lt;div&gt;
          {this.active? 'ssup?' : 'noooo'}
        &lt;/div&gt;
      );
    }
  }</code></pre>
  </div>
  </div>
  </p>
  <h1>2. Using React component state</h1>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>export default class Test extends Component {
    constructor() {
      this.state = { active: false };
    }
  
    render() {
      if(this.props.name === 'Dan') {
        this.setState({active: true});
      }
      return (
        &lt;div&gt;
          {this.active? 'ssup?' : 'noooo'}
        &lt;/div&gt;
      );
    }
  }</code></pre>
  </div>
  </div>
  </p>
  <p>I think it doesn't need to re-render using State if it's only affected by received props.</p>