React - Form submission canceled because the form is not connected

Question

I want to get the value of input after submitting the form but code gives me the error - 'Form submission canceled because the form is not connected'. I know that if I change the button type from submit to button it will work, but I need submit method because on button click the other action is written and dont want to write code inside onclick function

    updateItem(e) {
        // console.log(this.input.value);
        console.log(2222222222);
        e.preventDefault();

    }

    render() {
        return (
            <div className='wrapper'>
                <form onSubmit={this.updateItem}>
                    <input className='input'
                        type="text"
                        defaultValue={this.props.defValue}
                    // ref={(value) => {
                    //     this.input = value
                    // }}
                    />
                    <button type="submit" 
                            className='submitButton' 
                            onClick{this.props.editItem}>Update
                     </button>
                </form>
            </div>
        );
    }

Answer 1

I think all of these answers are wrong!. Here is what you should do.

since your form will be submitted with the onSubmit action then this type="submit" is what it is looking for within the form. Adding multiple buttons will trigger this warning since multiple actions are happening within the form. To fix that all you need to do is define a type to the 2nd or any other buttons ex type="button" this will fix your problem and you can add as many buttons as you like. Here is a full example.

1- Button #1

<button type="submit">My submit button</button>

2- Button #2 to infinity

<button type="button">My 2nd action</button>

I hope it helps anyone having this issue.

Answer 2

Same error, but now with 2 buttons (in a Login form) :

<Button primary id="button_submit" type="submit">Log in</Button>
<Button onClick={onClickForgotPassword}>Forgot your password?</Button>

The onSubmit looks like this:

const onSubmit = data => {
    props.onLoginStart(data);
};

And the onClickForgotPassword was initially like this:

const onClickForgotPassword = () => {
    history.push('/auth/forgotpassword');
};

I also got the same error.

Solved it by adding the event.preventDefault to the onClickForgotPassword:

 const onClickForgotPassword = (event) => {
        event.preventDefault();
        history.push('/auth/forgotpassword');
 };

And now the message is gone.