You can store in state an array of classes and use that to get all the information you need plus it gives an easy way to toggle any class in a set of classes.

basically this handleClasses function takes a class argument and then checks whether that class is already in your state. If it is, it removes it, if it's not, it add it to the state. Then in your span you join all the classes in the array in state to make a single string of classes.

Also you get the number of classes applied to your element very easily by doing classes.length

import React, { useState } from 'react';

const Component = () => {
  const [classes, setClasses] = useState(['singleWord']);

  const numberOfClasses = classes.length;

  const handleClasses = (c) => {
    setClasses(classes.includes(c)
      ? classes.filter((cls) => cls !== c)
      : [...classes, c]
    )
  }

  return (
    <span
      onClick={() => handleClasses(passClassToToggleHere)}
      className={classes.join(' ')}
    >
      text
    </span>
  )
};

If you are using colorRef = useRef() hook, then you can obtain the target node by calling colorRef.current and proceed with vanilla js methods like colorRef.current.classList.contain("oneClass') and so on.