Delete the user from the List : Ant Design

Question

Can somebody help me to delete data of user list Code is available below https://codesandbox.io/s/r4try Please tell me how to delete particular user from the user list. please use delete button on user

Answer 1

here is the solution

Codesandbox Demo

https://codesandbox.io/s/control-between-forms-ant-design-demo-99sus?file=/index.js


<Form.Item
     label="User List"
            shouldUpdate={(prevValues, curValues) => prevValues.users !== curValues.users}
          >
            {({ getFieldValue, setFieldsValue }) => {
              const users = getFieldValue('users') || [];
              return users.length ? (
                <ul>
                  {users.map((user, index) => (
                    <li key={index} className="user">
                      <Avatar icon={<UserOutlined />} />
                      {user.name} - {user.age}
                      <CloseOutlined onClick={() =>{
                        const updatedUsers = delete users[index];
                        setFieldsValue({users: updatedUsers})
                      }} style={{ paddingLeft: 15 }}/>
                    </li>
                  ))}
                </ul>
              ) : (
                <Typography.Text className="ant-form-text" type="secondary">
                  ( <SmileOutlined /> No user yet. )
                </Typography.Text>
              );
            }}
          </Form.Item>