Submitting form replaces last item instead of adding new item

Question

The handleCreate function of my modal simply replaces last item on my table instead of creating a new one. What am I doing wrong

    handleCreate = () => {
        const { form } = this.formRef.props;
        form.validateFields((error, values) => {
            if (error) {
                return error;
            }
            form.resetFields();
            const newUsers = {
                age: values.age,
                birthday: values[DATE_PICKER].format('YYYY-MM-DD'),
                firstName: values.firstName,
                hobby: values.hobby,
                id: uuid(),
                lastName: values.lastName,
            };
            this.setState({
                users: users.concat(newUsers),
                visible: false,
            });
        });
    };

Change `users: users.concat(newUsers)` to `users: [...users, newUsers]` — ponury-kostek, Oct 21 '19 at 09:34

score 0 · Accepted Answer · answered Oct 21 '19 at 09:40

you can do like this....

handleCreate = () => {
    const { form } = this.formRef.props;
    const users = [...this.state.users];
    form.validateFields((error, values) => {
        if (error) {
            return error;
        }
        form.resetFields();
        users.push({
            age: values.age,
            birthday: values[DATE_PICKER].format('YYYY-MM-DD'),
            firstName: values.firstName,
            hobby: values.hobby,
            id: uuid(),
            lastName: values.lastName,
        });
        this.setState({
            users,
            visible: false,
        });
    });
};

OR

handleCreate = () => {
    const { form } = this.formRef.props;
    form.validateFields((error, values) => {
        if (error) {
            return error;
        }
        form.resetFields();
        const newUsers = {
            age: values.age,
            birthday: values[DATE_PICKER].format('YYYY-MM-DD'),
            firstName: values.firstName,
            hobby: values.hobby,
            id: uuid(),
            lastName: values.lastName,
        };
        this.setState((prevState) => ({
            users: [...prevState.users, newUsers],
            visible: false,
        }));
    });
};

Submitting form replaces last item instead of adding new item

1 Answers1