Using conditions in AntD List Actions - reactjs

Question

I am trying to use conditions for the actions array in the AntD List Component. The following action should only be added, if the user is an admin and the count is >0. But it seems, that I cannot provide conditions like this inside the actions.
<List dataSource={items}
itemLayout="horizontal"
renderItem={item => (
<List.Item
actions={[
{isAdmin && item.count > 0 && <Button onClick={this.moveItemUp(item.key)}>up</Button>,}
<a key="list-loadmore-more">more</a>]}
>
...
</List.Item>
)}
Any ideas how to solve?

Answer 1

React automatically ignores any null or false values in render, so you are safe to leave the values as it exists:
<List dataSource={items}
itemLayout="horizontal"
renderItem={item => (
<List.Item
actions={[
isAdmin && item.count > 0 && <Button onClick={this.moveItemUp(item.key)}>up</Button>,
<a key="list-loadmore-more">more</a>]}
>
...
</List.Item>
)}
></List>
Stackblitz example
EDIT: If you want to avoid passing the item altogether, you can use the spread operator to do so:
actions={[
<a key="list-loadmore-edit">edit</a>,
...(condition ? [<a>Another</a>] : []),
]}

Answer 2

You can move the isAdmin and item.count > 0 condition outside of return and pass dynamically created array to like shown below
import React from 'react';
export default class App extends React.Component {
render() {
let actionList = [<a key="list-loadmore-more">more</a>];
if(isAdmin && items.length > 0) actionList.push(<Button onClick={this.moveItemUp(item.key)}>up</Button>)
return (
# your code
<List dataSource={items}
itemLayout="horizontal"
renderItem={item => (
<List.Item
actions={actionList}
>
...
</List.Item>
)}
# your code
)
}
}