How to add class to selected element in React Js

Question

I have numbers in my list and I am displaying them on the board:

const numbers = [
    1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21,
    22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40,
    41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59,
    60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75,
  ];
{numbers.map(number, index) => (
            <div className="bingo-grid__row" id={index+1} key={index}>
                <div className={className}>
                  <div className="bingo-ball bingo-ball">
                    <div className="bingo-ball__text">{number}</div>
                  </div>
                </div>
              </div>
          )
}

Besides that, I am selecting a random number:

const [chosen, setChosen] = useState(null);
  const [selectedNumbers, setSelectedNumbers] = useState([]);
  const chooseNumber = () => {
    let r;
    do {
      r = Math.floor(Math.random() * 75) + 1;
    }
    while (selectedNumbers.indexOf(r) > -1)
    setChosen(r)
    setSelectedNumbers([...selectedNumbers, r]);
  };

And what I am trying to do is add a class if the number is matching with the random number. So for example, if the random number is 6, I want to add a new class to the bingo-grid__row. Any suggestion for this?

Hakim Abdelcadir · Accepted Answer · 2022-06-19 17:01:03Z

1

You can create the class dynamically by adding a condition like this:

{numbers.map( (number, index) => (
  <div className={`bingo-grid__row ${chosen === number ? yourClassToAdd : ""}`} id={index+1} key={index}>
  //rest of the logic
 )
}

Update: If you want to keep the selections persistent then you can change the condition to use the selectedNumbers state that you already created like this:

{numbers.map( (number, index) => (
  <div className={`bingo-grid__row ${selectedNumbers.includes(number) ? yourClassToAdd : ""}`} id={index+1} key={index}>
  //rest of the logic
 )
}

edited Jun 19, 2022 at 17:01

answered Jun 19, 2022 at 16:15

Hakim Abdelcadir

1,3266 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

breking bed Over a year ago

Thats a good solution but every time when I select other the class is deleted. But I want it to be selected all the time

Hakim Abdelcadir Over a year ago

I updated the answer with the possibility to have persistence between different selections :)

Hazrat Gafulov · Accepted Answer · 2022-06-19 16:12:33Z

0

const [chosen, setChosen] = useState(null);
  const [selectedNumbers, setSelectedNumbers] = useState([]);
  const chooseNumber = async () => {
    let r;
    let component = document.querySelector(".bingo-grid__row")
    do {
      r = await Math.floor(Math.random() * 75) + 1;
      if(r === 6){
      componet.classList.add("newClass")
      }
    }
    while (selectedNumbers.indexOf(r) > -1)
    setChosen(r)
    setSelectedNumbers([...selectedNumbers, r]);
  };

answered Jun 19, 2022 at 16:12

Hazrat Gafulov

3484 silver badges9 bronze badges

Collectives™ on Stack Overflow

How to add class to selected element in React Js

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related