Change style to individual item React-Hooks

92
February 09, 2022, at 09:20 AM

I want to create a button that when you click it opens a navbar with different colors that when the user presses one of the colors, the navbar is closed and the button it self take the color the user clicked on.

my code works, but I have different outcomes then what I expected

this is the outcome

the green dots all changed at once, i want that only the dot on the item i clicked will change color

this is the code

    const colorLevelArr = ["rgb(236, 77, 77)", "rgb(241, 153, 70)", "rgb(255, 253, 151)", "rgb(147, 241, 135)","rgb(132, 220, 255)"];
    const [colorLevel, setColorLevel] = useState([]);
    const [colorLevelOpen, setcolorLevelOpen] = useState(null);
    
    const toggelColorLevel = (item) => {
    setcolorLevelOpen(preOpen => preOpen === item ? null : item)
}
const changeColorLevel = (index, item) => {
    setColorLevel(colorLevelArr[index])
    setcolorLevelOpen(preOpen => preOpen === item ? null : item)
}

and this is the code for the button

<button className="color_level_container"
onClick={() => toggelColorLevel(item)}
style={{
  backgroundColor:`${colorLevel}`,
      }}>
   {colorLevelOpen === item && (
   <div className="color_btn_container">
           {colorLevelArr.map((colorLevel, index)=>{
               return (
                  <div onClick={()=>{
                      toggelColorLevel(item)
                      changeColorLevel(index, item)
                      }
                  }
                   style={{
                       borderRadius:"100%",
                       border:"1px solid black",
                       width:"15px",
                       height:"15px",
                       backgroundColor:`${colorLevel}`,
                   }}>                                                                            
                  </div>
               ) 
           })}
        </div>
        )}
        
    
</button>

if someone can help me understand how to do it right,

and that the only color change will be to the item I pressed

Thank you in advance

Answer 1

it looks like you are using one state for the color, and use it for all the items. the easiest way to fix it will be to create a different state for each button, and by so, each one will have its own color. this can be done by creating a component for the button which holds the state for the color, and when state changes, the color of the current component will change accordingly and wont affect the other button components.

I wrote a small example just for you to understand the idea:

const colorsList = ['red', 'yellow', 'blue', 'green'];
const App = () => {
  return (
    <div style={{ margin: '100px' }}>
      <ChangingColorButton />
      <ChangingColorButton />
      <ChangingColorButton />
      <ChangingColorButton />
    </div>
  );
};
const ChangingColorButton = () => {
  const [color, setColor] = useState('black');
  return (
    <button
      onClick={() => setColor(colorsList[Math.floor(Math.random() * 3) + 1])}
      style={{ backgroundColor: color, marginRight: '8px' }}>
      Click to change color
    </button>
  );
};

as you can see, i have a list of color and by clicking each button its background color change to random color form the list.

This example demonstrate how you can control each color for each button separately.

Rent Charter Buses Company
READ ALSO
Angular - window.screen.height doesn&#39;t work on template

Angular - window.screen.height doesn't work on template

I have a problem when I want to optimize part of my template for mobiles in horizontal mode

93
use css variable to generate class names in scss

use css variable to generate class names in scss

is it possible to generate class names by css variables?

133
JSON Parse error: Unexpected identifier &quot;undefined&quot;

JSON Parse error: Unexpected identifier "undefined"

i just switched to a mac today and i noticed the JSONparse that works on other browsers, throws this error on safari

137