Customize dropdown item colors in React using a color picker

Question

Customize dropdown item colors in React using a color picker

I am currently utilizing a react color picker to create a personalized 16 color gradient. The process involves selecting a color from a dropdown menu and then using the color picker to make adjustments. This action updates an array that dictates the styling of each box in the dropdown. Ultimately, my objective is to modify the background of each entry in the dropdown to reflect the respective color in the gradient.

const gradientColors = ['#000000', '#000000', '#000000', '#000000', '#000000', '#000000', '#000000', '#000000', '#000000', '#000000', '#000000', '#000000', '#000000', '#000000', '#000000', '#000000'];

function ChangeCustomGradientColor(eventKey, color) {
gradientColors[eventKey] = color;
}

function App() {
const [color, setColor] = useState('#fff')
const [showColorPicker, setShowColorPicker] = useState(false)
const [eKey, setEventKey] = useState('');
const eventKeySelect=(e)=>{
setEventKey(e)
setShowColorPicker(showColorPicker => !showColorPicker)
}

return (
<div className="App" id="top">
<header className="App-header" id="mid">
<Dropdown onSelect={eventKeySelect}>
<Dropdown.Toggle variant="success" id="custom-color-change">
Change Custom Gradient Color
</Dropdown.Toggle>

<Dropdown.Menu >
<Dropdown.Item id="cust0" eventKey="0" style={{backgroundColor:gradientColors[0]}}>1</Dropdown.Item>
<Dropdown.Item id="cust1" eventKey="1" style={{backgroundColor:gradientColors[1]}}>2</Dropdown.Item>
...
...
...
<Dropdown.Item id="cust15" eventKey="15" style={{backgroundColor:gradientColors[15]}}>16</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
{
showColorPicker && (
<ChromePicker
disableAlpha={true}
color={color}
onChangeComplete={updatedColor => ChangeCustomGradientColor(eKey, updatedColor)}
/>
)}
</header>
</div>
)
}

In addition to the above approach, I have attempted to utilize the getElementByID method in my ChangeCustomGradientColor function, as shown below:

function ChangeCustomGradientColor(eventKey, color) {
let elementID = "cust" + eventKey;
document.getElementByID(elementID).style.backgroundColor = color;
}

While I have made progress through trial and error, I have reached a point where I recognize the importance of dedicating time to thorough JavaScript education. Any guidance or assistance would be greatly appreciated.

javascript html css reactjs react-native

Answer 1

Answer №1

Your Dropdown.Item components are going stale because the gradientColors are being mutated by reference instead of state. The solution is to bring gradientColors into state using useState. Check out this codesandbox example for reference.

Instead of mutating directly, you should update state like this:

  initialGradientColors[eventKey] = color.hex;

By updating state in this way, you ensure that the appropriate re-renders are triggered.

  const [gradientColors, setGradientColors] = useState(initialGradientColors);
  // in some callback 
  setGradientColors(prevGradientColors => {
    const updated = prevGradientColors.map((color, index) => {
      if (index === eventKey){
        return newColor;
      }
      return color;
    })
    return updated;
  })

Answer 2

Your Dropdown.Item components are going stale because the gradientColors are being mutated by reference instead of state. The solution is to bring gradientColors into state using useState. Check out this codesandbox example for reference.

Instead of mutating directly, you should update state like this:

  initialGradientColors[eventKey] = color.hex;

By updating state in this way, you ensure that the appropriate re-renders are triggered.

  const [gradientColors, setGradientColors] = useState(initialGradientColors);
  // in some callback 
  setGradientColors(prevGradientColors => {
    const updated = prevGradientColors.map((color, index) => {
      if (index === eventKey){
        return newColor;
      }
      return color;
    })
    return updated;
  })

Customize dropdown item colors in React using a color picker

Answer №1

Similar questions

reveal concealed section and seamlessly glide to specified location inside the secret compartment

An error is encountered with the getToken function in the Edge Runtime when using dynamic code evaluation methods such as 'eval', 'new Function', or 'WebAssembly.compile'

Setting the z-index for Bootstrap dropdown menus on containers that are generated dynamically

Tips for ensuring consistent dimensions on a bootstrap card

The issue with Firebase's real-time database is that data constantly gets overwritten within a single node

How can one identify a concealed glitch that exclusively occurs for a particular individual or hardware in a React environment?

Guide on utilizing ajax to post data when the URL parameter changes, all without refreshing the page

Where should uploaded files be stored using ng-flow?

I noticed that the node_modules folder has mysteriously vanished from my

Concatenating strings with JavaScript

The React JS @material-ui/core Select component encountered an error when attempting to access a property that does not exist: 'offsetWidth'

Minimizing conditional statements in my JavaScript code

Using Node.js to Send Parameters in a POST Request

Prevent one individual cell in a table from dictating the overall table width

The video header on my webpage refuses to start playing upon loading

Creating a dynamic text field integrated with Google Places in Ionic 4: a step-by-step guide

Can Vue.js 3 composition be leveraged with v-for to incorporate a query string into a router-link?

An error of type TypeError has been encountered due to an invalid argument type. This occurred in the file located at {mypath}Desktop eddit ode_modules@redisclientdistlibclientRESP2encoder.js on line

How can I incorporate random variables and functions into an if-else function when using Jquery to make #divId droppable?

Reacting to a click event to display a new image