React input value is not getting updated although value next to it with same variable is

Question

Basically I use a react input and can't get it's textvalue to update when I click on a button but the value right next to it gets updated on a re-render. I'm also using Redux to call a service to update the values.

So for example if the input quantity loads up with value 55 and I click the '+' button I'd expect the input quantity to get updated to 56 and the value right next to it to be 56. (the value right next to it is there for debug purposes). What actually happens is that the input value stays at 55 and the value right next to it gets updated to 56. Any idea what the problem is?

I have the following code:

class GroceryItemEditModal extends Component {
  constructor(props) {
    super(props);

    this.toggle = this.toggle.bind(this);
    this.addItem = this.addItem.bind(this);
    this.removeItem = this.removeItem.bind(this);
    this.handleQuantityChange = this.handleQuantityChange.bind(this);
    this.handleQuantityBlur = this.handleQuantityBlur.bind(this);
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.refreshEditItemData === true) {
      this.props.loadEditItem(this.props.selectedEditItem.Id);
    }
  }
  componentDidMount() {
    if (this.props.selectedEditItem) {
      this.props.loadEditItem(this.props.selectedEditItem.Id);
    }
  }
  addItem() {
    const quantity = this.props.selectedEditItem.Quantity + 1;

    this.props.setEditItemQuantity(this.props.selectedEditItem.Id, quantity);
  }
  removeItem() {
    const quantity = this.props.selectedEditItem.Quantity - 1;

    this.props.setEditItemQuantity(this.props.selectedEditItem.Id, quantity);
  }
  handleQuantityBlur(event) {
    const quantity = event.target.value;

    this.props.setEditItemQuantity(this.props.selectedEditItem.Id, quantity);
  }
  toggle() {
    this.props.toggleEditItemVisibility(!this.props.showEditItem);
  }
  render() {
    if (!this.props.selectedEditItem) {
      return <div />;
    }
    let spinner = '';
    if (this.props.modifyingEditItem) {
      spinner = <FontAwesome name="spinner" spin />;
    }
    return (
      <div>
        <Modal isOpen={this.props.showEditItem} toggle={this.toggle} className={this.props.className}>
          <ModalHeader toggle={this.toggle}>Edit Grocery Item</ModalHeader>
          <ModalBody>
            <div>{this.props.selectedEditItem.Name}</div>
            <Form>
              <FormGroup>
                <Label for="blah">Quantity</Label>
                <Row>
                  <Col xs="1">
                    <Button color="primary" onClick={this.removeItem}>-</Button>
                  </Col>
                  <Col xs="9">
                    <Input name="selectedItemQty" id="selectedItemQty" Value={this.props.selectedEditItem.Quantity} onBlur={this.handleQuantityBlur}></Input>{this.props.selectedEditItem.Quantity}
                  </Col>
                  <Col xs="1">
                    <Button color="primary" onClick={this.addItem}>+</Button>
                  </Col>
                  <Col xs="1">
                  </Col>
                </Row>
              </FormGroup>
            </Form>
            {spinner}
          </ModalBody>
          <ModalFooter>
            <Button color="primary" onClick={this.toggle}>Close</Button>{' '}
          </ModalFooter>
        </Modal>
      </div>
    );
  }
}

Answer 1

You can try following thing:

Use an attribute "key" on Input component and give it a random id whenever Input component renders... like this:

< Input key={shordid.generate()} .... whatever props... .>

Answer 2

is the prop Value in the component Input well spelled ?

<Input
  name="selectedItemQty"
  id="selectedItemQty"
  /*the V is capitalized is that normal ?*/Value={this.props.selectedEditItem.Quantity}
  onBlur={this.handleQuantityBlur}>
</Input>
{this.props.selectedEditItem.Quantity}