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