title: Can only change one letter in input in Reactjs?
body: <p>I have a class in Reactjs that looks like this:</p>
  
  <pre><code> class ViewLegos extends Component {
    componentDidMount() {
      this.props.store.getAllLegoParts();
    }
  
    render() {
      const columns = [
        {
          Header: "Piece",
          accessor: "piece"
        },
        {
          Header: "Type",
          accessor: "type"
        }
      ];
      return (
        &lt;div&gt;
          {this.props.store.legoParts.state === "pending" ? (
            &lt;h3&gt;No data to display!&lt;/h3&gt;
          ) : (
            &lt;ReactTable
              defaultPageSize={10}
              className="-striped -highlight"
              data={this.props.store.legoParts.value}
              columns={columns}
              SubComponent={row =&gt; {
                console.log(row);
                return (
                  &lt;Table striped bordered condensed hover&gt;
                    &lt;thead&gt;
                      &lt;tr&gt;
                        &lt;th&gt;Name&lt;/th&gt;
                        &lt;th&gt;Type&lt;/th&gt;
                        &lt;th&gt;Start Date&lt;/th&gt;
                        &lt;th&gt;End Date&lt;/th&gt;
                        &lt;th&gt;Change it up!&lt;/th&gt;
                      &lt;/tr&gt;
                    &lt;/thead&gt;
                    &lt;tbody&gt;
                      &lt;tr onClick={this.props.store.changeData(row.original)}&gt;
                        &lt;td&gt;
                          &lt;input
                            type="text"
                            onChange={e =&gt; this.props.store.addLego("piece", e)}
                            name="piece"
                            value={row.original.piece}
                          /&gt;
                        &lt;/td&gt;
                        &lt;td&gt;
                          &lt;input
                            type="text"
                            onChange={e =&gt;
                              this.props.store.addLego("type", e.target.value)
                            }
                            placeholder={this.props.store.type}
                          /&gt;
                        &lt;/td&gt;
                        &lt;td&gt;
                          &lt;Datetime
                            date="date"
                            onChange={e =&gt;
                              this.props.store.addLego("startDate", e)
                            }
                          /&gt;
                        &lt;/td&gt;
                        &lt;td&gt;
                          &lt;Datetime
                            type="date"
                            onChange={e =&gt; this.props.store.addLego("endDate", e)}
                          /&gt;
                        &lt;/td&gt;
                        &lt;td&gt;
                          &lt;button
                            onClick={() =&gt;
                              this.props.store.updatePiece(row.original)
                            }
                          &gt;
                            Update
                          &lt;/button&gt;
                          &lt;button
                            onClick={() =&gt;
                              this.props.store.deletePiece(
                                this.props.row.original.id
                              )
                            }
                          &gt;
                            Delete
                          &lt;/button&gt;
                        &lt;/td&gt;
                      &lt;/tr&gt;
                    &lt;/tbody&gt;
                  &lt;/Table&gt;
                );
              }}
            /&gt;
          )}
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>The changeData function which is called when a row is clicked, is in a MobX store and looks like this:</p>
  
  <pre><code>changeData = action("change state", part =&gt; {
      this.piece = part.piece;
    });
  </code></pre>
  
  <p>And when the value is changed in the input field, this function is enabled in a Mobx store:</p>
  
  <pre><code> addLego = action("addLego", (storeName, value) =&gt; {
      this[storeName] = value.target.value;
    });
  </code></pre>
  
  <p>I want to be able to update the value in the input field.  However at the moment I can only change one letter!  Every time I enter more letters that one letter just changes to the new letter.  Grateful for your help!</p>