Switching between multiple classnames in one element

Question

I wanna switch between two classnames in one element in react by clicking a button. When I click the "Solution" button, the classname of the h1 changes from "solution" to "", but the classname of "blur" stays. My goal is that the classname of "blur" changes to "unblur" when clicking the "Solution" button.

import React from 'react'
import {useState, useEffect} from "react";
import "./Celeb.css"
import images from "../Index.json"


function Celeb() {
  const [image, setImage] = useState();
  const [name, setName] = useState();
  const [unblur, setUnblur] = useState(true);
  const [unblurSolution, setUnblurSolution] = useState(true);
  const [imageList, setImageList] = useState(images);
  ...

  return (
    <div className='celeb'>
      <div className='celeb_buttons'>
        <button className='play_button' onClick={handleNext}>Next</button>
        <button className='play_button' onClick={()=> setUnblur(!unblur)}>Start</button>
        <button className='play_button' onClick={()=> setUnblurSolution(!unblurSolution)}>Solution</button>
      </div>
      <div className='pic'>
        <img className={unblur ? "blur" : "unblur"} {...unblurSolution ? "solution" : "unblur"} src={image} />
       <h1 className={unblurSolution ? "solution" : ""}>{name}</h1>
      </div>
    </div>
  )
}

Answer 1

Why are u trying to destructor the boolean value here?

Because of this, the value will not read as boolean and use the logic of class name in the quotes

Answer 2

This syntax doesn't make much sense:

className={unblur ? "blur" : "unblur"} {...unblurSolution ? "solution" : "unblur"}

The second code block is entirely disconnected from the first and has nothing to do with the className attribute. (And why is the spread syntax even being used? None of the other instances of this same logic in this same code use it...) If you're toggling multiple className values, that logic needs to be in the same code block.

Consider that multiple className values ultimately form a string. So you're essentially dynamically building parts of a string. Combine those parts into one larger string. For example:

className={`${unblur ? "blur" : "unblur"} ${unblurSolution ? "solution" : "unblur"}`}

Note of course that if both unblur and unblurSolution are false then you'll be using the "unblur" class twice. This is unlikely to cause a problem though. But if it's not desired then you can refactor your logic to whatever is desired.

As the inline logic gets more complex, you can always move it to before the render and define variables to be used within the render. For example:

let imgClass = '';
if (unblur)
  imgClass += ' blur';
if (unblurSolution)
  imgClass += ' solution';
if (imgClass.length === 0)
  imgClass = 'unblur';

// and later, in the JSX...
className={imgClass}

There are probably a variety of ways to define your logic for whatever className value you ultimately want. The overall point is that the resulting value needs to be assigned to the className attribute on that element, not just in another code block after the attribute.