title: Using Arrow function for class properties in React. Not clear
body: <p>I came across the arrow function feature being used as Class property in React component. Looking online I found that it makes code more readable and because of the arrow function features we do not have to bind the handlEvents function inside of constructor.</p>
  
  <p>I still have to use the bind method even while using an arrow function for class property as shown in the code below. When i remove the binding in constructor it shows error in console <code>Warning: A component is changing an uncontrolled input of type text to be controlled.</code> and the form errors do not show up as well</p>
  
  <pre><code>class Contact extends Component {
      constructor(props) {
          super(props);
  
          this.handleBlur = this.handleBlur(this);
      }
  
      handleBlur = evt =&gt; field =&gt; {
          this.setState({
          touched: { ...this.state.touched, [field]: true }
      });
  
     render() {
         return(
            &lt;Form onSubmit={this.handleSubmit}&gt;
              &lt;FormGroup row&gt;
                &lt;Label htmlFor="firstname" md={2}&gt;
                  First Name
                &lt;/Label&gt;
                &lt;Col md={10}&gt;
                  &lt;Input
                    type="text"
                    id="firstname"
                    name="firstname"
                    placeholder="First Name"
                    valid={errors.firstname === ""}
                    invalid={errors.firstname !== ""}
                    value={this.state.firstname}
                    onBlur={event =&gt; {
                      this.handleBlur("firstname");
                    }}
                    onChange={this.handleInputChange}
                /&gt;
                &lt;FormFeedback&gt;{errors.firstname}&lt;/FormFeedback&gt;
              &lt;/Col&gt;
            &lt;/FormGroup&gt;
         &lt;/Form&gt;
     )
  
  }
  </code></pre>