Как добавлять класс одному блоку и удалять класс у остальных блоков?

В React есть несколько возможных подходов для добавления классов одному блоку и удаления классов у остальных блоков.

1. Использование состояния:
Один из способов - использование состояния компонента для отслеживания активного блока и установки класса. Для этого нужно добавить в состояние компонента переменную, например, "activeBlock", которая будет хранить индекс активного блока. Затем можно использовать метод map для отрисовки всех блоков и условно применить класс в зависимости от значения "activeBlock":

class Blocks extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      activeBlock: -1
    };
  }

  handleBlockClick(index) {
    this.setState({ activeBlock: index });
  }

  render() {
    const { activeBlock } = this.state;

    return (
      <div>
        {blocks.map((block, index) => (
          <div
            key={index}
            className={index === activeBlock ? "active" : ""}
            onClick={() => this.handleBlockClick(index)}
          >
            {block.content}
          </div>
        ))}
      </div>
    );
  }
}

const blocks = [
  { content: "Block 1" },
  { content: "Block 2" },
  { content: "Block 3" }
];

В данном примере каждый блок будет иметь класс "active" только если его индекс совпадает с "activeBlock". При клике на блок, вызывается метод handleBlockClick, который обновляет состояние "activeBlock" с новым значением.

2. Использование "classnames":
Второй способ - использование библиотеки "classnames". Эта библиотека позволяет легко управлять классами на основе условий.

Для начала установите библиотеку классов через npm:

   npm install classnames

Затем в компоненте можно использовать библиотеку "classnames" для установки класса в зависимости от активного блока. Вот пример:

   import React from "react";
   import classNames from "classnames";
   
   class Blocks extends React.Component {
     constructor(props) {
       super(props);
       this.state = {
         activeBlock: -1
       };
     }
   
     handleBlockClick(index) {
       this.setState({ activeBlock: index });
     }
   
     render() {
       const { activeBlock } = this.state;
   
       return (
         <div>
           {blocks.map((block, index) => (
             <div
               key={index}
               className={classNames({ active: index === activeBlock })}
               onClick={() => this.handleBlockClick(index)}
             >
               {block.content}
             </div>
           ))}
         </div>
       );
     }
   }
   
   const blocks = [
     { content: "Block 1" },
     { content: "Block 2" },
     { content: "Block 3" }
   ];

В этом примере, блок будет иметь класс "active", если его индекс совпадает с "activeBlock", и не будет иметь класса, если эти значения не совпадают.

Польза использования библиотеки "classnames" заключается в том, что она предоставляет более гибкие возможности для управления классами на основе сложных условий, например, добавление или удаление нескольких классов одновременно в зависимости от состояния компонента.

Это два основных подхода для добавления класса одному блоку и удаления классов у остальных блоков в React. Выберите тот, который лучше соответствует вашим потребностям и предпочтениям в кодировании.