Html Question posted in
Some basic documentation can be found here.

Html – How do I add a CSS class to an element if selected using React?

below I have a series of React code that has several circles displayed on a page, each with a different color. When a color is clicked, the nav displays that change by reading off the selected color.

import { useState } from "react";
const Color = ({ color, setSelectedColor}) => {
  return <div className={color} onClick={() => setSelectedColor(color)}></div>;
};


const App = () => {
  const [selectedColor, setSelectedColor] = useState("");
  return (
    <div id="container">
      <div id="navbar">
        <div>Currently selected: </div>
        <div className={selectedColor}>{selectedColor}</div>
      </div>
      <div id="colors-list">
        <Color color="violet" setSelectedColor={setSelectedColor}/>
        <Color color="orange" setSelectedColor={setSelectedColor}/>
        <Color color="yellow" setSelectedColor={setSelectedColor}/>
      </div>
    </div>
  );
};

export default App;

I don’t think you all need any other code, but if you do need it let me know!

There is a class in CSS that I have called selected which just creates a border around a circle. The problem I am having is how exactly do I apply the class to the selectedColor? I am thinking of ternary operators, but I am a tad bit new to React, so I am unsure how I should implement this.

Any help is greatly appreciated!

Tags:

2

Answers


  1. 0

    You need to add a variable to check if the color prop matches the selectedColor, and if they match you add the selected class, and with the ternary operator you can apply both the color and selected classes.

    import { useState } from "react";
const Color = ({ color, setSelectedColor, selectedColor }) => {
  const isSelected = color === selectedColor ? "selected" : "";
  return (
    <div
      className={`${color} ${isSelected}`} // Apply both color and selected classes
      onClick={() => setSelectedColor(color)}
    ></div>
  );
};

const App = () => {
  const [selectedColor, setSelectedColor] = useState("");

  return (
    <div id="container">
      <div id="navbar">
        <div>Currently selected: </div>
        <div className={selectedColor}>{selectedColor}</div>
      </div>
      <div id="colors-list">
        <Color color="violet" selectedColor={selectedColor} setSelectedColor={setSelectedColor} />
        <Color color="orange" selectedColor={selectedColor} setSelectedColor={setSelectedColor} />
        <Color color="yellow" selectedColor={selectedColor} setSelectedColor={setSelectedColor} />
      </div>
    </div>
  );
};

export default App;
    Login or Signup to reply.
  2. 0

    You can enhance the Color component by adding an "isSelected" attribute. This attribute will indicate whether the current color matches the selected color. Consequently, based on the value of the "isSelected" attribute, you can dynamically apply the "selected" class alongside the "color" class on the Color component.

    here is the modified code:

    import { useState } from "react";

const Color = ({ color, isSelected, setSelectedColor}) => {
  return <div className={`${color} ${isSelected ? 'selected' : ''}`} onClick={() => setSelectedColor(color)}></div>;
};


const App = () => {
  const [selectedColor, setSelectedColor] = useState("");
  return (
    <div id="container">
      <div id="navbar">
        <div>Currently selected: </div>
        <div className={selectedColor}>{selectedColor}</div>
      </div>
      <div id="colors-list">
        <Color color="violet" isSelected={selectedColor === 'violet'} setSelectedColor={setSelectedColor} />
        <Color color="orange" isSelected={selectedColor === 'orange'} setSelectedColor={setSelectedColor}/>
        <Color color="yellow" isSelected={selectedColor === 'yellow'} setSelectedColor={setSelectedColor}/>
      </div>
    </div>
  );
};

export default App;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search