Unknown props onValidSubmit, onSubmitted on <form> tag

[16292]

Hi,

I am new here and try to make the login example work. I get this error:

Warning: Unknown props onValidSubmit, onSubmitted on <form> tag. Remove these props from the element. For details, see https://fb.me/react-unknown-prop
in form (created by Formsy)
in Formsy (created by App)

import React, { Component } from 'react';
import { Form } from 'forms-react';





import Formsy from 'forms-react';


const MyInput = React.createClass({

    // Add the Formsy Mixin
    mixins: [Formsy.Mixin],

    // setValue() will set the value of the component, which in
    // turn will validate it and the rest of the form
    changeValue(event) {
        this.setValue(event.currentTarget[this.props.type === 'checkbox' ? 'checked' : 'value']);
    },
    render() {

        // Set a specific className based on the validation
        // state of this component. showRequired() is true
        // when the value is empty and the required prop is
        // passed to the input. showError() is true when the
        // value typed is invalid
        const className = 'form-group' + (this.props.className || ' ') +
              (this.showRequired() ? 'required' : this.showError() ? 'error' : '');

        // An error message is returned ONLY if the component is invalid
        // or the server has returned an error message
        const errorMessage = this.getErrorMessage();

        return (
            <div className={className}>
                <label htmlFor={this.props.name}>{this.props.title}</label>
                <input
                    type={this.props.type || 'text'}
                    name={this.props.name}
                    onChange={this.changeValue}
                    value={this.getValue()}
                    checked={this.props.type === 'checkbox' && this.getValue() ? 'checked' : null}
                    />
                <span className='validation-error'>{errorMessage}</span>
            </div>
        );
    }
});

export default MyInput;




// App component - represents the whole app
export default class App extends Component {
    constructor(props) {
        super(props)

        this.state = {canSubmit: false }
    }
    submit(data) {
        alert(JSON.stringify(data, null, 4));
    }
    enableButton() {
        this.setState({ canSubmit: true });
    }

    disableButton() {
        this.setState({
            canSubmit: false,
        });
    }
    render() {
        return (
            <Form  className="login">
                <MyInput name="email" title="Email" validations="isEmail" validationError="This is not a valid email" required />
                <MyInput name="password" title="Password" type="password" required />
                <button type="submit" disabled={!this.state.canSubmit}>Submit</button>
            </Form>
        );
    }
}

Anyone can help me please ?

[graphman65]

I'm facing the exact same issue.

[philwhln]

Same here. This is related to a very recent React update 15.2.0. Discussion on the React-side is here
https://gist.github.com/jimfb/d99e0678e9da715ccf6454961ef04d1b