I have around 50 options to be shown in the react select options. But I want to exclude some of the options with logic to already posted values. The purpose is, that we have a form where we add values from the drop-down list. if one item is been added then that should not have to be shown in the dropdown list.

refactored code:

export default function App() {
  const choices = [
    {
      value: 0,
      label: "Container empty to shipper"
    },
    {
      value: 1,
      label: "Container pickup at shipper"
    },
    {
      value: 2,
      label: "Container arrival at first POL (Gate in)"
    },
    {
      value: 3,
      label: "Container loaded at first POL"
    }
  ];

  const postedList = [
    "Container empty to shipper",
    "Container pickup at shipper"
  ];
  return (
    <div className="App">
      <h1>Select Box</h1>
      <Select
        isClearable={false}
        // here the choices should be 2 eliminating the other 2 whose labels are matching to postedlist 
        options={choices}
        defaultValue={choices[0]}
        onChange={(choice) => console.log(choice.value)}
      />
    </div>
  );
}

Currently, it's rendering all 4 choices available but I want to return only 2 of them whose labels are not matching to postedlist

I also have created Codesandbox. If you want to see it there.

推荐答案

You can use Array.prototype.filter() and Array.prototype.includes() to filter out already posted items. Then use the filteredList as input to the Select component as below.

  const filteredList = choices.filter(({ label }) =>
    !postedList.includes(label)
  );

  return (
    <div className="App">
      <h1>Select Box</h1>
      <Select
        isClearable={false}
        options={filteredList}
        defaultValue={filteredList[0]}
        onChange={(choice) => console.log(choice.value)}
      />
    </div>
  );

Edit happy-wave-yktw2j

Reactjs相关问答推荐

利用OVERPASS API端点计算某建筑的表面积

如何处理具有REACTION-REDUX状态的Nextjs路由警卫

在数组对象内的数组上进行映射

如何使用.Aggregate从多个集合中获取数据,包括使用Mongoose+NextJS的SUM值

阻止组件更新的多分派Redux Thunk或setState是否有任何问题

useEffect firebase 清理功能如何工作?

Javascript - 正则表达式不适用于 MAC OS - 编码?

对于 ref 上的可见 prop 或 open 方法来react 组件,哪种方式更好?

我可以在加载器函数中多次 fetch() 并使用一次 useloaderdata() 提取它吗?

如何在 ReactJS 中提交后删除 URL 中的查询参数

React - 错误边界未捕获错误

MUI - ButtonGroup fullWidth 条件屏幕大小不起作用?

docker:来 automorphic 护进程的错误响应:未指定命令.的原因是什么?

调用 Statsig.updateUser 时 UI 不呈现

使用 React.UseEffect 从 api 获取但我的清理返回不起作用

setState 改变对象引用

Lodash 在命名导入中导入整个包

单击当前子div时如何更改p标签的图像和样式?react

Rtk 查询无效标签不使数据无效

使具有 onClick 免疫的父元素的子元素