title: React Form: Form Input requires a name property when used
body: <p>I have created a form using formsy-react-2 but it's not working. I am getting </p>
  
  <blockquote>
    <p>Error: Form Input requires a name property when used</p>
  </blockquote>
  
  <p>I am new on React JS I did not know which package is best when working with forms in React JS. Please give me some suggestions. </p>
  
  <p>Here the source code of my form class in React JS. I am using react version '16.5.2'</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React from 'react';
  
  import Formsy from 'formsy-react-2';
  
  class MyInput extends Formsy.Mixin {
      static defaultProps = {
          type: 'text'
      }
  
      updateValue = (event) =&gt; {
          this.setValue(event.target.value);
      }
  
      render() {
          const {type, ...rest} = this.removeFormsyProps(this.props);
          const errorMessage = this.getErrorMessage();
          return (
              &lt;div&gt;
                  &lt;input {...rest} type={type} value={this.getValue()} onChange={this.updateValue}/&gt;
                  &lt;span&gt;{errorMessage}&lt;/span&gt;
              &lt;/div&gt;
          )
      }
  }
  
  class MyInputHOC extends React.Component {
      updateValue = (event) =&gt; {
          this.props.setValue(event.target.value);
      }
  
      render() {
          const errorMessage = this.getErrorMessage();
          return (
              &lt;div&gt;
                  &lt;input type='text' value={this.props.getValue()} onChange={this.updateValue}/&gt;
                  &lt;span&gt;{errorMessage}&lt;/span&gt;
              &lt;/div&gt;
          )
      }
  }
  
  export default  Formsy.HOC(MyInputHOC);
  
  // Using your new component
  
  class MyForm extends React.Component {
      state = {
          formIsValid: false
      }
  
      enableSubmit() {
          this.setState({formIsValid: true});
      }
  
      disableSubmit() {
          this.setState({formIsValid: false});
      }
  
      submit(model) {
          console.log(model);
          // model = {
          //   foo: 'foo@foo.com',
          //   bar: 10
          // }
      }
  
      // This code results in a form with a submit button that will run the `submit`
      // method when the submit button is clicked with a valid email. The submit button
      // is disabled as long as
      // - the foo input is empty or the value is not an email; and
      // - the bar input is not an integer.
      // On validation error it will show the error message.
  
      render() {
      return(
              &lt;Formsy.Form onValidSubmit={this.submit} onValid={this.enableSubmit} onInvalid={this.disableSubmit}&gt;
                  &lt;MyInput name='foo' validations='isEmail' validationError='This is not a valid email' required/&gt;
                  &lt;MyInputHOC name='bar' validations='isInt' validationError='This is not an integer' /&gt;
                  &lt;button type="submit" disabled={!this.state.formIsValid}&gt;Submit&lt;/button&gt;
              &lt;/Formsy.Form&gt;
      )
  
      }
  }</code></pre>
  </div>
  </div>
  </p>