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

Time:05-09

How can I display the content of my dropdown. Because for now, the dropdown is displayed but the options Good, Medium, Bad, Critical are not printed out.

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>
  );
}

CustomDropdown:

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>
  )
}

Here is my code

CodePudding user response:

change below code From:

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>
  );
}

To:

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>
  );
}
  • Related