Чтобы использовать состояние в атрибуте className, вам необходимо использовать среду программирования или библиотеку, поддерживающую управление состоянием, например React. Вот пример того, как этого можно добиться с помощью React:

1. Определите переменную состояния в своем компоненте:

   import React, { useState } from 'react';
   const MyComponent = () => {
   const [isActive, setIsActive] = useState(false);
   const toggleClass = () => {
   setIsActive(!isActive);
   };
   return (
   <div className={isActive ? 'active' : 'inactive'}>
     <button onClick={toggleClass}>Toggle Class</button>
   </div>
   );
   };
   export default MyComponent;

В этом примере переменная состояния isActiveизначально имеет значение false. При нажатии кнопки активируется функция toggleClass, которая переключает значение isActiveмежду trueи false.. Атрибут classNameзатем обновляется на основе значения isActive.

2. Другой подход — использовать условное выражение непосредственно в JSX:

   import React, { useState } from 'react';
   const MyComponent = () => {
   const [isActive, setIsActive] = useState(false);
   return (
   <div className={isActive ? 'active' : 'inactive'}>
     <button onClick={() => setIsActive(!isActive)}>Toggle Class</button>
   </div>
   );
   };
   export default MyComponent;

В этом случае состояние isActiveнапрямую используется в атрибуте classNameс помощью условного выражения.

Это всего лишь пара примеров того, как вы можете использовать состояние в атрибуте classNameвнутри компонента React. Не забудьте настроить имена классов и логику в соответствии с вашим конкретным вариантом использования.