title: react update component props outside of component class
body: <p>I have some problem with creating React app. Here is the problem:</p>
  
  <pre class="lang-js prettyprint-override"><code>import React from 'react';
  
  const VIEW_MAIN = 0;
  const VIEW_SUB = 1;
  
  const VIEWS = {};
  VIEWS[VIEW_MAIN] = (&lt;ViewMain someProps={...} /&gt;);
  VIEWS[VIEW_SUB] = (&lt;ViewSub someProps={...} /&gt;);
  
  const AppContent = React.createClass({
      render() {
  
          let renderDOM = null;
  
          if(this.props.view === VIEW_MAIN) {
              renderDOM = VIEWS[VIEW_MAIN];
          }
          else {
              renderDOM = VIEWS[VIEW_SUB];
          }
  
          return (
              &lt;div id="ViewContainer"&gt;
                  {renderDOM}
              &lt;/div&gt;
          );
      }
  });
  </code></pre>
  
  <p>You can see that "VIEWS" constant variable contains 2 views, VIEW_MAIN and VIEW_SUB. Each view is React Component.</p>
  
  <p>Both components have same property named "someProps". Now, this is the problem. I want to add property of "AppContent" component into both two React Components, but of course, it is impossible because they are outside of class definition.</p>
  
  <p>So move them into the class definition, problem is I don't know where should I put. Should I put inside of "render" method? I think that is bad idea, because render method will execute many times.</p>
  
  <p>If I use "class" keyword instead of using createClass, I think it is possible if the defining "VIEWS" constant variable codes are inside of constructor function(constructor()) but i don't like to use them.</p>
  
  <p>I typed code like this temporarily:</p>
  
  <pre class="lang-js prettyprint-override"><code>const AppContent = React.createClass({
      _initViews() {
          if(typeof this.VIEWS === 'undefined') {
              this.VIEWS = {};
              this.VIEWS[VIEW_MAIN] = (&lt;ViewMain someProps={this.props.some} /&gt;);
              this.VIEWS[VIEW_SUB] = (&lt;ViewSub someProps={this.props.some} /&gt;);
      },
      render() {
          this._initViews();
  
          ...
      }
  });
  </code></pre>
  
  <p>I added <code>_initialViews</code> method inside of class, and execute it when render calls. It works fine, but the problem is always executing "_initViews" method on rendering <code>AppContent</code> component. I want to execute only once, and I think using react like that is bad idea.</p>
  
  <p>Should I just use Class keyword instead? As i heard, there is "setProps" method inside of React but that is now deprecated, and i also think that using setProps method is bad idea.</p>
  
  <p>Is there a way to good practice or better solution what am I trying? If it is, it will be very appreciate it advice me.</p>