React Form: Form Input requires a name property when used

I have created a form using formsy-react-2 but it's not working. I am getting

Error: Form Input requires a name property when used

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.

Here the source code of my form class in React JS. I am using react version '16.5.2'

import React from 'react';

import Formsy from 'formsy-react-2';

class MyInput extends Formsy.Mixin {
    static defaultProps = {
        type: 'text'
    }

    updateValue = (event) => {
        this.setValue(event.target.value);
    }

    render() {
        const {type, ...rest} = this.removeFormsyProps(this.props);
        const errorMessage = this.getErrorMessage();
        return (
            <div>
                <input {...rest} type={type} value={this.getValue()} onChange={this.updateValue}/>
                <span>{errorMessage}</span>
            </div>
        )
    }
}

class MyInputHOC extends React.Component {
    updateValue = (event) => {
        this.props.setValue(event.target.value);
    }

    render() {
        const errorMessage = this.getErrorMessage();
        return (
            <div>
                <input type='text' value={this.props.getValue()} onChange={this.updateValue}/>
                <span>{errorMessage}</span>
            </div>
        )
    }
}

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(
            <Formsy.Form onValidSubmit={this.submit} onValid={this.enableSubmit} onInvalid={this.disableSubmit}>
                <MyInput name='foo' validations='isEmail' validationError='This is not a valid email' required/>
                <MyInputHOC name='bar' validations='isInt' validationError='This is not an integer' />
                <button type="submit" disabled={!this.state.formIsValid}>Submit</button>
            </Formsy.Form>
    )

    }
}

Solution

You need to use/specify the name property in the MyInputHOC Component also.

In MyInput Component name property is passed on via {...rest}.

import React from 'react';

import Formsy from 'formsy-react-2';

class MyInput extends Formsy.Mixin {
    static defaultProps = {
        type: 'text'
    }

    updateValue = (event) => {
        this.setValue(event.target.value);
    }

    render() {
        const {type, ...rest} = this.removeFormsyProps(this.props);
        const errorMessage = this.getErrorMessage();
        return (
            <div>
                <input {...rest} type={type} value={this.getValue()} onChange={this.updateValue}/>
                <span>{errorMessage}</span>
            </div>
        )
    }
}

class MyInputHOC extends React.Component {
    updateValue = (event) => {
        this.props.setValue(event.target.value);
    }

    render() {
        const errorMessage = this.getErrorMessage();
        return (
            <div>
                <input name={this.props.name} type='text' value={this.props.getValue()} onChange={this.updateValue}/>
                <span>{errorMessage}</span>
            </div>
        )
    }
}

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(
            <Formsy.Form onValidSubmit={this.submit} onValid={this.enableSubmit} onInvalid={this.disableSubmit}>
                <MyInput name='foo' validations='isEmail' validationError='This is not a valid email' required/>
                <MyInputHOC name='bar' validations='isInt' validationError='This is not an integer' />
                <button type="submit" disabled={!this.state.formIsValid}>Submit</button>
            </Formsy.Form>
    )

    }
}

UPDATE

Just to make things clearer, the code which you have shared is for different ways in which you can use Formsy.

MyInput.js

import React from 'react';

import Formsy from 'formsy-react-2';

export default class MyInput extends Formsy.Mixin {
    static defaultProps = {
        type: 'text'
    }

    updateValue = (event) => {
        this.setValue(event.target.value);
    }

    render() {
        const {type, ...rest} = this.removeFormsyProps(this.props);
        const errorMessage = this.getErrorMessage();
        return (
            <div>
                <input {...rest} type={type} value={this.getValue()} onChange={this.updateValue}/>
                <span>{errorMessage}</span>
            </div>
        )
    }
}

MyInputHOC.js

import React from 'react';
import Formsy from 'formsy-react-2';

class MyInputHOC extends React.Component {
    updateValue = (event) => {
        this.props.setValue(event.target.value);
    }

    render() {
        const errorMessage = this.getErrorMessage();
        return (
            <div>
                <input name={this.props.name} type='text' value={this.props.getValue()} onChange={this.updateValue}/>
                <span>{errorMessage}</span>
            </div>
        )
    }
}

export default  Formsy.HOC(MyInputHOC);

MyForm.js

import React from 'react';
import Formsy from 'formsy-react-2';
import MyInput from './MyInput';
import MyInputHOC from './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(
            <Formsy.Form onValidSubmit={this.submit} onValid={this.enableSubmit} onInvalid={this.disableSubmit}>
                <MyInput name='foo' validations='isEmail' validationError='This is not a valid email' required/>
                <MyInputHOC name='bar' validations='isInt' validationError='This is not an integer' />
                <button type="submit" disabled={!this.state.formIsValid}>Submit</button>
            </Formsy.Form>
    )

    }
}