How to delete a list item from ant design List?

Question

I want to show a list of data in ant design List.

I also want to add a delete or remove button at the end of the each list item. I am unable to find any API for adding this. I am using 4.3.5 version of antd from npm.

Is there any solution for this problem?

Answer 1

If you check the API for List.Item there is a prop called extra which accepts JSX and you can add the buttons their. For eg:

<List
    size="large"
    header={<div>Header</div>}
    footer={<div>Footer</div>}
    bordered
    dataSource={data}
    renderItem={(item) => (
      <List.Item extra={<Button size="small">Delete</Button>}>
        {item}
      </List.Item>
    )}
/>

You can also check working demo here: https://codesandbox.io/s/polished-fast-hzl9m?file=/index.js:477-755