React with Antd Form onFinish not retrieve data

Question

I'm a beginner in React and I was following a tutorial on how to create a React app with Django backend.In the video he uses Ant Design Components v3(that was the latest when the video was made). Now I'm using the latest one v4 and they changed the form onSubmit to onFinish. After some research in the comments, people posted about the update and how to make it work but no luck.The problem is that I'm trying to get the data from the form inputs(title and content) and it shows undefined.Any ideas? Here is the component:

import React, { Component } from "react";
import { Form, Input, Button } from "antd";

const FormItem = Form.Item;

class CustomForm extends Component {
    handleFormSubmit = (values) => {
        const title = values.title;
        const content = values.content;
        console.log(title, content, values);
    };

    render() {
        return (
            <div>
                <Form onFinish={(values) => this.handleFormSubmit(values)}>
                    <FormItem label="Title">
                        <Input name="title" placeholder="Article Content" />
                    </FormItem>
                    <FormItem label="Content">
                        <Input
                            name="content"
                            placeholder="Enter Article Content"
                        />
                    </FormItem>
                    <FormItem>
                        <Button type="primary" htmlType="submit">
                            Submit
                        </Button>
                    </FormItem>
                </Form>
            </div>
        );
    }
}

export default CustomForm;

And the output of the console.log() is: undefined, undefined, {}

Answer 1

It's because Form.Item or, in your case, FormItem, must have a name prop which is missing so values are not being saved against that key, so e.g.

Change this:

<FormItem label="Title">
   <Input name="title" placeholder="Article Content" />
</FormItem>

To

<FormItem label="Title" name="title">
    <Input placeholder="Article Content" />
</FormItem>