¿Hay alguna manera de convertir una selección de un menú desplegable a una etiqueta con el color apropiado (ver la imagen)?
ItemDisplay.jsx
export default function ItemDisplay() { ... const colourStyles = { singleValue: (provided, { data }) => ({ ...provided, backgroundColor: data.value === "Good" ? "#36B37E" : data.value === "Medium" ? "#FF8B00" : data.value === "Bad" ? "#FF5630" : "" }) }; ... return ( ... <Dropdown style={styles.select} options={TASTE} defaultValue={TASTE.find((t) => t.label === item.taste)} styleSelect={colourStyles} /> </div> ... ); }Lo que puede hacer es tener otro componente de etiqueta que reemplace el menú desplegable cada vez que seleccione un elemento:
export default function CustomDropdown({ style, options, styleSelect, defaultValue }) { const [selected, setSelected] = React.useState(defaultValue); const backgroundColor = styleSelect?.(selected?.label) ?? "grey"; const Tag = () => { return ( <div style={{display: "flex", justifyContent:"space-around", padding: "0.2em",backgroundColor: backgroundColor, borderRadius: "2px", color:"white"}}> {selected.label} <button style={{backgroundColor: "transparent", color:"white", border: "none", cursor: "pointer"}} onClick={() => setSelected(null)}>x</button> </div> ) } return ( <div style={style}> {selected ? <Tag /> : <Select value={selected} onChange={setSelected} options={options} /> } </div> ); }Idealmente, debe crear un archivo adecuado para el componente de etiqueta y pasar la propiedad seleccionada al componente.
También cambié la implementación de colourStyles y lo convertí en una función que devuelve el color adecuado según la selección:
const colourStyles = (selected) => { switch(selected){ case "Good": return "#36B37E"; case "Medium": return "#FF8B00"; case "Bad": return "#FF5630"; default: return "" } };