Cannot alter input field in Reactjs?

Question

I have a a table in Reactjs that looks as follows:

class ViewLegos extends Component {
  componentDidMount() {
    this.props.store.getAllLegoParts();
  }

  render() {
    const columns = [
      {
        Header: "Piece",
        accessor: "piece"
      }
    ];
    return (
      <div>
        {this.props.store.legoParts.state === "pending" ? (
          <h3>No data to display!</h3>
        ) : (
          <ReactTable
            defaultPageSize={10}
            className="-striped -highlight"
            data={this.props.store.legoParts.value}
            columns={columns}
            SubComponent={row => {
              return (
                <Table striped bordered condensed hover>
                  <thead>
                    <tr>
                      <th>Name</th>
                      <th>Change</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr
                      onClick={() =>
                        this.props.store.changeData(
                          row.original.piece
                        )
                      }
                    >
                      <td>
                        <input
                          onChange={e => this.props.store.addLego("piece",e)}
                          value={this.props.store.piece}
                        />
                      </td>
                      <td>
                        <button onClick={() => this.props.store.updatePiece()}>
                          Update
                        </button>
                        <button
                          onClick={() =>
                            this.props.store.deletePiece(
                              this.props.row.original.id
                            )
                          }
                        >
                          Delete
                        </button>
                      </td>
                    </tr>
                  </tbody>
                </Table>
              );
            }}
          />
        )}
      </div>
    );
  }
}

export default inject("store")(observer(ViewLegos));
I want to change the data in the table row. So when the row is clicked it is going to this function in a Mobx store:

   changeData = action(
"change state temporarily",
(piece) => {
  this.piece = piece; 
);

The changeData function which is called when a row is clicked, is in a MobX store and looks like this:

changeData = action("change state", part => {
    this.piece = part.piece;
  });

And when the value is changed in the input field, this function is enabled in a Mobx store:

addLego = action("addLego", (storeName, value) => {
    this[storeName] = value;
  });

I want to be able to alter the value of the input value. However when I try to type in the input field, I can't! Thanks for your help!

Answer 1

e is event, not the value of the input. The value is event.target.value. Changing your addLego method should fix it.

addLego = action("addLego", (storeName, event) => {
  this[storeName] = event.target.value;
});