title: Rendering an array of html elements
body: <p>I want to render an array of html elements in my component. The reason for storing the data/html in an array is because I want to be able to dynamically load a new element depending on a button-click.
  This is how I want to display my array:</p>
  
  <pre><code> &lt;div&gt;
         {this.state.steps}
   &lt;/div&gt;
  </code></pre>
  
  <p>This is how I initiate my component and array:</p>
  
  <pre><code>  componentDidMount() {
          this.createProcessStep().then(step =&gt; {
              this.setState({steps: this.state.steps.concat(step)});
          });
      }
    export function createProcessStep() {
      this.setState({processStepCounter: this.state.processStepCounter += 1});
      return this.addStepToArray().then(d =&gt; {
          return this.reallyCreateProcessStep()
      });
    }
   addStepToArray = () =&gt; {
          const step = {
            ...Some variables...
          };
          return new Promise(resolve =&gt; {
              this.setState({
                  stepsData: this.state.stepsData.concat(step)
              }, resolve)
          });
      };
  </code></pre>
  
  <p>"stepsData" is another array that holds data (variables) belonging to each step. "steps" on the other hand, should only hold the html.
  This is how one step/element looks like:</p>
  
  <pre><code>&lt;div&gt;
   ...Some Content...
   &lt;button label="+" onClick={ () =&gt; {
                              this.createProcessStep().then(step =&gt; {
                                  this.setState({
                                      steps: this.state.steps.concat(step)
                                  });
                              })
                          }}/&gt;
   ...other content...
  &lt;/div&gt;
  </code></pre>
  
  <p>This button within each step is responsible for loading/adding yet another step to the array, which actually works. My component displays each step properly, however react doesn't properly render changes to the element/step, which is
  to say that, whenever e.g. I change a value of an input field, react doesn't render those changes. So I can actually click on the "+"-button that will render the new html element but whenever a change to this element occurs,
  react simply ignores the phenotype of said change. Keeping in mind that the changeHandlers for those steps/elements still work. I can change inputfields, radioButtons, checkboxes etc. which will do exactly what it's
  supposed to, however the "re-rendering" (or whatever it is) doesn't work.
  Any ideas of what I'm doing wrong here? Thanks!</p>