Skip to content
Advertisement

REACT-SELECT Color the background of my cell if a choice is selected (or just the text itself)?

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.

Advertisement