title: ReactJS: How to change Text value on button click
body: <p>I am creating a form in my App and need to add a quantity field in it. I have added a <code>&lt;Text&gt;</code> component from <a href="https://www.npmjs.com/package/informed" rel="nofollow noreferrer">informed</a> to add quantity field and used buttons to add increment and decrement feature.</p>
  
  <p>But I am not able to set Text component value on button click. It seems like  I can only set <code>initialValue</code> for <code>&lt;Text&gt;</code> component.</p>
  
  <pre><code>import React, { Component } from 'react';
  import { arrayOf, number, shape, string } from 'prop-types';
  
  import classify from 'src/classify';
  import defaultClasses from './quantity.css';
  import { Text } from 'informed';
  
  class Quantity extends Component {
      static propTypes = {
          classes: shape({
              root: string,
              increment_button: string,
              decrement_button: string,
              quantity_input: string
          }),
          items: arrayOf(
              shape({
                  value: number
              })
          )
      };
  
      state = {
          quantity: 1,
          show: true,
          max: 9999,
          min: 1
      };
  
      incrementQty = () =&gt; {
          this.setState(prevState =&gt; {
              if(prevState.quantity &lt; this.state.max) {
                  return {
                      quantity: parseInt(prevState.quantity) + 1
                  }
              } else {
                  return null;
              }
          });
          /*this.setState({ quantity: parseInt(this.state.quantity) + 1 });*/
      };
      decrementQty = () =&gt; {
          this.setState(prevState =&gt; {
              if(prevState.quantity &gt; this.state.min) {
                  return {
                      quantity: parseInt(prevState.quantity) - 1
                  }
              } else {
                  return null;
              }
          });
          /*this.setState({ quantity: parseInt(this.state.quantity) - 1 });*/
      };
      setQuantity = quantity =&gt; this.setState({ quantity });
      handleChange = (event) =&gt; {
          this.setState({quantity: event.target.value});
      };
  
      render() {
          const { classes, ...restProps } = this.props;
          console.log(this.state.quantity);
          return (
              &lt;div className={classes.root}&gt;
              &lt;span onClick={this.decrementQty} className={classes.decrement_button}&gt;-&lt;/span&gt;
              &lt;Text
                  initialValue = {`${this.state.min}`}
                  className={classes.quantity_input}
                  field="quantity"
                  onChange={this.handleChange}
                  value={this.state.quantity}
                  label=""
              /&gt;
              &lt;span onClick={this.incrementQty} className={classes.increment_button}&gt;+&lt;/span&gt;
              &lt;/div&gt;
      );
      }
  }
  
  export default classify(defaultClasses)(Quantity);
  </code></pre>
  
  <p>I have tried using <code>value</code> prop but its not working. If I am using uncontrolled html <code>&lt;input&gt;</code> field, the buttons and quantity increment decrement works but I don't want to use <code>&lt;input&gt;</code> element with my form.</p>