title: Is it possible to hold a list of react components in state and render them?
body: <p>I've been attempting to learn some React programming recently, and I ran into some confusion when learning about rendering lists.</p>
  
  <p>The React documentation describes this method for rendering lists:</p>
  
  <pre><code> const listItems = numbers.map((number) =&gt;
      &lt;li&gt;{number}&lt;/li&gt;
    );
    return (
      &lt;ul&gt;{listItems}&lt;/ul&gt;
    );
  </code></pre>
  
  <p>Out of curiosity, I decided to try holding a list of React elements in the state of one of my components and render that list directly. I figured that it might be able to avoid the need of mapping the data to an element every time a render occurred.</p>
  
  <p>I was able to make this work: </p>
  
  <pre><code>'use strict';
  
  class List2 extends React.Component {
      constructor(props) {
          super(props);
  
          let nums = [];
  
          for(let i = 0; i &lt; 5; i++) {
              nums.push(React.createElement('div', null, i));
          }       
  
          this.state = {
              numbers : nums, 
          }
      }
  
  
      render() {
          return (
              React.createElement('div', null, this.state.numbers)
          )
      }
  }
  </code></pre>
  
  <p>However, I tried to add a button to my window that added elements to the element list, the new elements added by the button's onCLick function don't render. This is the code that doesn't work: </p>
  
  <pre><code>'use strict';
  
  class List3 extends React.Component {
      constructor(props) {
          super(props);
  
          this.state = {
              nextNum : 1,
              numbers : [], 
          }
  
          this.buttonAction = this.buttonAction.bind(this);
      }
  
      buttonAction() {
          let numElement = React.createElement('h1', null, this.state.nextNum);
  
          let newNumber = this.state.numbers;
          newNumber.push(numElement);
  
          this.setState(
              { nextNum : (state.nextNum + 1),    
                numbers : newNumbers,
              }
          );
      }
  
      render() {
          return (
              React.createElement('div', null, 
                  this.state.numbers,
                  React.createElement('button', {onClick : this.buttonAction}, 'clicketh')
              )
          )
      }
  }
  </code></pre>
  
  <p>When I click the button, I don't see new numbers render on the screen.</p>
  
  <p>Can someone help me explain what's going on here?
  Is the mapping method from above the only reliable way to render lists with react?</p>