警告：validateDOMNesting（...）： <form> 不能作为 <form>

Question

In reactjs, I am using the ant-design library for a form. In the console i face this problem:

 Warning: validateDOMNesting(...): <form> cannot appear as a descendant of <form> 

Can someone show me what mistake I made in my code?

code

import React, { component } from 'react';
import styled from 'styled-components';
import 'antd/dist/antd.css';
import './FirstStep.css';
import { Form, Input } from 'antd';
class RegisterStepOne extends React.Component {

  render() {
    const { getFieldDecorator } = this.props;
    return (
      <div>
        <FormCard>
          <Form onSubmit={this.handleSubmit} className="login-form">
            <FormItem>
              {getFieldDecorator('firstName', {
                rules: [
                  {
                    required: true,
                    message: 'Please input your First name!',
                    whitespace: true,
                  },
                ],
              })(<Input placeholder="First name" />)}
            </FormItem>
            <FormItem>
              {getFieldDecorator('lastName', {
                rules: [
                  {
                    required: true,
                    message: 'Please input your Last name!',
                    whitespace: true,
                  },
                ],
              })(<Input placeholder="Last name" />)}
            </FormItem>
            <FormItem>
              {getFieldDecorator('email', {
                rules: [
                  {
                    type: 'email',
                    message: 'The input is not valid E-mail!',
                  },
                  {
                    required: true,
                    message: 'Please input your E-mail!',
                  },
                ],
              })(<Input placeholder="Email" />)}
            </FormItem>
            <FormItem>
              {getFieldDecorator('lastPosition', {
                rules: [
                  {
                    required: true,
                    message: 'Please input your Last Position!',
                    whitespace: true,
                  },
                ],
              })(<Input placeholder="Present or last position" />)}
            </FormItem>
            <FormItem>
              {getFieldDecorator('lastCompany', {
                rules: [
                  {
                    required: true,
                    message: 'Please input your Last Company!',
                    whitespace: true,
                  },
                ],
              })(<Input placeholder="Present or last Company" />)}
            </FormItem>
          </Form>
        </FormCard>
      </div>
    );
  }
}
export default RegisterStepOne;

Answer 1

Looking at the console screenshot suggests that <RegisterStepOne /> is a child of a <form> somewhere higher up the component tree.

You are seeing the error because your DOM renders to something like this

<form>
  <div>
    <form>
      <input />
    </form>
  </div>
</form>

Which is not valid HTML