title: React Input Element : Value vs Default Value
body: <p>i am new in React and REDUX, i just develop a simple react app, and now i face a problem, when i render an input element within my component if i set the element "value" it become read-only but if i set the value on "defaultValue" it will never update again when i re-update my state. </p>
  
  <p>Here is my code :</p>
  
  <pre><code>    import React from "react";
      export default class EditForm extends React.Component {
  
      editTransaction(event) {
  
          var transaction = this.props.transaction;
  
          event.preventDefault();
          var NewTransaction = {
              transactions_data: {
                  amount: this.refs.amount.value
              }
          }
  
          this.props.editTransaction(NewTransaction, transaction.id);
      }
  
      closeForm() {
          this.props.closeForm();
      }
  
      render() {
          var {amount}=this.props.transaction;
          return (
              &lt;div&gt;
                  &lt;br/&gt;
                  &lt;h4&gt;Edit Transaction&lt;/h4&gt;
                  &lt;div className="btn btn-danger pull-right" onClick={this.closeForm.bind(this)}&gt;close&lt;/div&gt;
                  &lt;div className="clearfix"&gt;&lt;/div&gt;
                  &lt;form onSubmit={this.editTransaction.bind(this)}&gt;
                      &lt;div&gt;
                          &lt;label for="amount"&gt;Amount&lt;/label&gt;
                          &lt;input value={amount} onChange={(value) =&gt; this.onChange(value)} className="form-control"
                                 id="amount" name="amount" type="number"
                                 ref="amount"/&gt;
                      &lt;/div&gt;
                      &lt;br/&gt;
                      &lt;br/&gt;
                      &lt;input className="btn btn-info" type="submit" value="submit"/&gt;
                  &lt;/form&gt;
              &lt;/div&gt;
          );
      }
  }
  </code></pre>
  
  <p>and then i found out if i make an error out of this by adding 
  <code>onChange={(value) => this.onChange(value)}</code> on my input element, it works properly ( it updating while the props or state is updating, and i can re-type the value), but i think this is not a proper solution, because it cause errors on my browser console. It is because "this.onChange" function does not exist.</p>
  
  <p>please kindly help me to solve this problem, and thanks in advance</p>
  
  <p>Regards,</p>
  
  <p>Vidy</p>