Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

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

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 :

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

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

>Solution :

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>
  );
}
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading