显示了我的下拉列表，但未打印出 content/filter

Question

如何显示下拉菜单的内容。因为现在，显示了下拉列表，但未打印出选项 Good、Medium、Bad、Critical。

export default function Info({ onValidation, display }) {
  const LEVEL = [
    { name: "Good", value: "Good" },
    { name: "Medium", value: "Medium" },
    { name: "Bad", value: "Bad" },
    { name: "Critical", value: "Critical" }
  ];

  return (
    <div className="flex items-center">
      <CustomDropdown options={LEVEL} isMulti={true} />
    </div>
  );
}

自定义下拉列表：

export default function CustomDropdown({ className, style, options, styleSelect, defaultValue, isMulti = false }) {
    const [selected, setSelected] = useState(defaultValue);

    const styles = {
        select: {
            width: '100%',
            maxWidth: 200,
        }
    }

    return <div style={style} >
        {selected && isMulti === false ?
            <Tag selected={selected} setSelected={setSelected} styleSelect={styleSelect} />
            :
            <Select className={className} style={styles.select} value={selected} onChange={setSelected} options={options} isMulti={isMulti} />
        }
    </div>
}

Tag.jsx :

export default function Tag({ selected, setSelected, styleSelect }) {
  const backgroundColor = styleSelect?.(selected?.label) ?? "grey";
  return (
      <div style={{ display: "flex", justifyContent: "space-around", padding: "0.1em", backgroundColor: backgroundColor, borderRadius: "4px", color: "white", marginRight: "20px", marginLeft: "4px", marginBottom: "8px" }}>
          {selected.label}
          <button
              style={{ backgroundColor: "transparent", color: "white", border: "none", cursor: "pointer", marginRight: "1px", marginLeft: "6px" }}
              onClick={() => setSelected(null)}>x</button>
      </div>
  )
}

这是我的code

Answer 1

更改以下代码来自：

export default function Info({ onValidation, display }) {
  const LEVEL = [
    { name: "Good", value: "Good" },
    { name: "Medium", value: "Medium" },
    { name: "Bad", value: "Bad" },
    { name: "Critical", value: "Critical" }
  ];

  return (
    <div className="flex items-center">
      <CustomDropdown options={LEVEL} isMulti={true} />
    </div>
  );
}

收件人：

export default function Info({ onValidation, display }) {
  const LEVEL = [
    { label: "Good", value: "Good" },
    { label: "Medium", value: "Medium" },
    { label: "Bad", value: "Bad" },
    { label: "Critical", value: "Critical" }
  ];

  return (
    <div className="flex items-center">
      <CustomDropdown options={LEVEL} isMulti={true} />
    </div>
  );
}

显示了我的下拉列表，但未打印出 content/filter

My dropdown is displayed but the content/filter is not printed out

reactjs

tailwind-css

react-hooks