I want to fill the background of my dropbox cell if a selection is made. For example Taste:Good
, and the Comments: 3/4
, which must be the defaut value from the match.json. The background of the cell should be in green if it’s Good
. And the 3/4
cell should be in yellow. (cf image)
For Availability, it will be only checkbox that is already in blue if availability is 1 else not fill in blue.
import React from "react"; import Select from "react-select";
Display:
export default function Display() { ... const styles = { select: { width: "100%", maxWidth: 150 } }; const TASTE = [ { label: "Good", value: "Good" }, { label: "Medium", value: "Medium" }, { label: "Bad", value: "Bad" } ]; ... return ( <> <div className="TextStyle"> {"Taste "} <CustomDropdown style={styles.select} options={TASTE} defaultValue={TASTE.find((t) => t.label === item.taste)} /> </div> ... </> ); }
Advertisement
Answer
In the Select component you can use a prop called styles where you can actually create a logic for displaying a different color based on the selection you made. For example: if you want to have the background color green only when you select Good then you can create an object like this:
const colourStyles = { singleValue: (provided, { data }) => ({ ...provided, backgroundColor: data.value === "Good" ? "green" : "", }), };
And then pass the object colourStyles to the CustomDropDown as prop:
<CustomDropdown style={styles.select} options={TASTE} defaultValue={TASTE.find(t => t.label === item.taste)} styleSelect={colourStyles} />
Finally inside the CustomDropdown component pass the styleSelect to the Select component like this (remember to add the new prop I’ve created as an argument inside the CustomDropdown component):
<Select options={options} defaultValue={defaultValue} styles={styleSelect} />
You can then do the same for the other CustomDropDown component.