score:3

Accepted answer
const [selected, setSelectedState] = useState(true);

const className = "appointment-item " + (selected ? "selected" : "");

return (
  <div className={className} />
)

score:0

const [selected, setSelectedState] = useState(true);
const [className , setClassName] = useState("none");

useEffect(() => {
    setClassName("appointment-item " + (selected ? "selected" : ""))
    console.log(className );
}, [selected] );


return (
  <div className={className} onClick={()=>setSelectedState(!selected)}>{Math.random()}</div>
);

score:0

const [selected, setSelectedState] = useState(true);

let clsName = 'appointment-item ' + (selected ? 'selected' : '');

return(
<div className={`${clsName}`} onClick={() => setSelectedState(!selected)}>
{Math.random()}
</div>
)

score:3

const [selected, setSelectedState] = useState(true); // 0

let className = "none"; // 1

useEffect(() => { 
    // 3
    className = "appointment-item " + (selected ? "selected" : "");
    console.log(className );
}, [selected] );

// 2
return (
  <div className={`${className}`} onClick={()=>setSelectedState(!selected)}>{Math.random()}</div>
);

Related Query

More Query from same tag