Javascript 根据状态动态隐藏/显示每行上的图标

场景：当状态为“已批准”时，我想隐藏“批准”按钮，否则显示“批准”按钮

参见下面的代码

const [data, setData] = useState([
{ID: 1, STATUS: "APPROVED"},
{ID: 2, STATUS: "FOR APPROVAL"},
{ID: 3, STATUS: "REJECTED"}]);


<MaterialTable
  icons={tableIcons}
  columns={columns}
  data={data}
  title="List of Advisory"
  style={{overflowX: 'auto'}}
  actions={[
    {
      icon: tableIcons.Edit,
      tooltip: 'Edit Advisory',
      onClick: (event, rowData) => selectedAdvisory(rowData, 'Edit')
    },
    {
            icon: tableIcons.Delete,
            tooltip: 'Delete Advisory',
            onClick: (event, rowData) => selectedAdvisory(rowData, 'Delete')
    },
    {
            icon: tableIcons.ThumbsUpDownIcon,
            tooltip: 'Approved/Disapproved Advisory',
            onClick: (event, rowData) => selectedAdvisory(rowData, 'ApproveDisapprove')
    },
    {
            icon: tableIcons.PageviewIcon,
            tooltip: 'Preview',
            onClick: (event, rowData) => alert('You are about to view' + rowData.ADVISORYID)
    }
]}
localization={{
                header:{actions:'Actions'}
            }}
/>

const[data，setData]=useState([
{ID:1，状态：“已批准”}，
{ID:2，状态：“待批准”}，
{ID:3，状态：“已拒绝”}）；
已选择的dvisory（行数据“编辑”）
},
{
图标：表格图标。删除，
工具提示：“删除建议”，
onClick：（event，rowData）=>selectedAdvisory（rowData，“Delete”）
},
{
图标：tableIcons.ThumbUpDownIcon，
工具提示：“已批准/未批准的建议”，
onClick：（事件，rowData）=>selectedAdvisory（rowData，'ApproveDisapprove'）
},
{
图标：tableIcons.PageviewIcon，
工具提示：“预览”，
onClick：（event，rowData）=>alert（'您将要查看'+rowData.ADVISORYID）
}
]}
本地化={{
标题：{actions:'actions'}
}}
/>

---

我只想在带有2和3的行上显示批准图标，因为它们是尚未批准的行。

我还没有在代码笔或类似设备上运行此功能。。你有办法主持吗

我想在这里的某个地方使用三元运算符应该没有问题吧

data.status==“已批准”？：

在三元运算符中换行-将要显示的零件放在第一部分（true部分），并将未批准时要显示的零件放在第二部分

文档：
在阅读了一些关于其他相关问题的评论后找到了答案