Applying styles to multiple Selects

[markoleptic]

Hi, this is probably a very easy fix but I've been searching for hours but I'm afraid I lack the knowledge to search for the right thing. I'm pretty new to React.

I reduced the code to include only relevant info. The part that isn't working is the "state.menuIsOpen ? 0 : 1" however the isSelected inside of option does correctly change the background color of both select's option. My main question is how do I pass the current Select "object" to selectStyles so it knows which Select object I'm currently referring to?

I think props are usually how this is handled in React, but I'm not sure. I tried passing in useState variables that changed when each Select menu was open/closed, but that caused both of them to open at the same time.

const ProfileCharts = () => {

  const selectStyles = {
    menu: (provided, state) => ({
      ...provided,
      opacity: state.menuIsOpen ? 0 : 1,
      transition: "all 120ms ease-in-out",
    }),
    option: (provided, state) => ({
      ...provided,
      backgroundColor: state.isSelected ? "hsl(193, 81%, 58%)" : "white",
      "&:hover": {
        backgroundColor: "hsl(193, 81%, 58%)",
        transition: "all 120ms ease-out",
      },
    }),
  };
  return(
    <>
      <Select
        className="game-mode-select"
        options={gameModeOptions}
        onChange={(newValue) => handleGameModeSelect(newValue.value)}
        placeholder="Filter by game mode"
        styles={selectStyles}
      />
      <Select
        className="song-select"
        options={songOptions}
        onChange={(newValue) => handleSongSelect(newValue.value)}
        placeholder="Filter by song"
        styles={selectStyles}
      />
    </>
  )
}
export default ProfileCharts;

[manjushsh]

Hi @markoleptic,
If I am understanding correctly, you want to color hover background for both select differently but want to keep common style object.
You can append identifiable string and make conditional styling accordingly.

Code Sandbox. See last 2 selects

Code:

import { useState } from "react";
import Select from "react-select";

const ProfileCharts = ({ options }) => {
  const [selected, setSelected] = useState(null);

  const handleChange = (selectedOption) => {
    setSelected(selectedOption);
  };

  return (
    <>
      <Select
        className="game-mode-select"
        id="game-mode-select"
        options={options.map((option) => {
          return { ...option, value: `game-mode-select-${option.value}` };
        })}
        onChange={(newValue) => handleChange(newValue?.value)}
        placeholder="Filter by game mode"
        styles={coloredSelectStyles}
      />
      <Select
        className="song-select"
        id="song-select"
        options={options.map((option) => {
          return { ...option, value: `song-select-${option.value}` };
        })}
        onChange={(newValue) => handleChange(newValue.value)}
        placeholder="Filter by song"
        styles={coloredSelectStyles}
      />
    </>
  );
};
export default ProfileCharts;

export const coloredSelectStyles = {
  menu: (provided, state) => ({
    ...provided,
    opacity: state.menuIsOpen ? 0 : 1,
    transition: "all 120ms ease-in-out"
  }),
  option: (provided, state) => {
    console.log(state);
    return {
      ...provided,
      backgroundColor: state.isSelected ? "hsl(193, 81%, 58%)" : "white",
      "&:hover": {
        backgroundColor: state?.value?.includes("game-mode-select")
          ? "red"
          : "hsl(193, 81%, 58%)",
        transition: "all 120ms ease-out"
      }
    };
  }
};

[markoleptic]

Thanks for taking the time to reply! It did indeed fix the problem I was having where selecting things in one Select would affect the other. However I'm still having problems getting the opacity transition working.

[markoleptic]

Actually I could get it to work by wrapping the Selects in divs and providing the coloredSelectStyles with the menuIsOpen variables for each.

const [ menuIsOpen, setMenuIsOpen ] = useState(false);
const [ menuIsOpen2, setMenuIsOpen2 ] = useState(false);

export const coloredSelectStyles =(menuOpen)=> ({
    menu: (provided, state) => {
        return {
      ...provided,
      marginTop: 0,
      fontSize: 14,
      opacity: menuOpen ? 1 : 0,
      transition: "all 200ms ease-in",
        };
    },
...
)}

  return (
    <>
      <h2>Conditional Coloring</h2>
      <div onClick={() => setMenuIsOpen(!menuIsOpen)}>
      <Select
        className="game-mode-select"
        id="game-mode-select"
        options={options.map((option) => {
          return { ...option, value: `game-mode-select-${option.value}` };
        })}
        onChange={(newValue) => handleChange(newValue?.value)}
        placeholder="Filter by game mode"
        styles={coloredSelectStyles(menuIsOpen)}
      />
      </div>
      <div onClick={() => setMenuIsOpen2(!menuIsOpen2)}>
      <Select
        className="song-select"
        id="song-select"
        options={options.map((option) => {
          return { ...option, value: `song-select-${option.value}` };
        })}
        onChange={(newValue) => handleChange(newValue.value)}
        placeholder="Filter by song"
        styles={coloredSelectStyles(menuIsOpen2)}
      />
      </div>
    </>
  );

But I'm not sure if that's a good implementation practice or not. It feels like I'm not really using it like its supposed to be used.