title: how to update render with the new state
body: <p>Inserting new values into the array worked, but i want the table to be updated in render </p>
  
  <pre><code>this.state = {
  materials: [
                  {
                      material: {id: 1, label: 'm1'},
                      quantity: 2,
                      unitPrice: 12,
                      total: 0
                  },
                  {
                      material:  {id: 2, label: 'm2'},
                      quantity: 4,
                      unitPrice: 15,
                      total: 1
                  }
              ]
  }
  </code></pre>
  
  <pre><code>
  handleOnClick(e){
          this.state.materials.push(this.state.selectedMaterialUnitID, this.state.quantity, this.state.unitPrice, this.state.total);
          console.log(this.state.materials); // this worked fine
  
      }
  </code></pre>
  
  <pre><code>&lt;tbody&gt;
  {materials.map((obj) =&gt; {return(
      &lt;tr&gt;
          &lt;td &gt;{obj.material.label}&lt;/td&gt;
          &lt;td&gt;{obj.quantity}&lt;/td&gt;
          &lt;td&gt;{obj.unitPrice}&lt;/td&gt;
          &lt;td&gt;{obj.total}&lt;/td&gt;
      &lt;/tr&gt;
  )})}
  &lt;/tbody&gt;
  
  &lt;Button varient={"light"} onClick={this.handleOnClick}&gt;Add row&lt;/Button&gt;
  </code></pre>
  
  <p>expected result is when the table updated and insert the new row</p>