title: React: Create a new html element on click
body: <p>I've used React for a couple of weeks now but I have this simple problem that I can't seem to wrap my head around. It's about creating new html elements.</p>
  
  <p>I would just like to know in general if the way that I went about it, is the "right way" or is there another preferred way to create new html element with a click function.</p>
  
  <p>For some reason this problem took awhile for me to figure out and it still feels a bit strange, that's why I'm asking.</p>
  
  <p>Thanks in advance!</p>
  
  <pre><code>import React, { Component } from 'react';
  import './Overview.css';
  
  import Project from './Project';
  
  class Overview extends Component {
   constructor() {
    super()
    this.state = {
     itemArray: []
    }
  }
  
  createProject() {
   const item = this.state.itemArray;
   item.push(
     &lt;div&gt;
       &lt;h2&gt;Title&lt;/h2&gt;
       &lt;p&gt;text&lt;/p&gt;
     &lt;/div&gt;
   )
   this.setState({itemArray: item})
   //console.log(this.state)
  }
  
  render() {
   return (
     &lt;div className="Overview"&gt;
       &lt;p&gt;Overview&lt;/p&gt;
       &lt;button onClick={this.createProject.bind(this)}&gt;New Project&lt;/button&gt;
       &lt;Project /&gt;
       &lt;div&gt;
         {this.state.itemArray.map((item, index) =&gt; {
           return &lt;div className="box" key={index}&gt;{item}&lt;/div&gt;
         })}
       &lt;/div&gt;
     &lt;/div&gt;
    );
   }
  }
  
  export default Overview;
  </code></pre>