Как в React изменить стиль всех элементов класса?

Question

[nivaech]

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

function clickSmaller() {
        const element = document.getElementsByClassName('product-card');
            element.style.width = "250px";   
            element.style.height= "300px";

Но в этом случае React выдает ошибку, но делает то что нужно, если задать номер позиции в array класса (например,
document.getElementsByClassName('product-card')[0], в таком случае изменяются параметры высоты и ширины только первого объекта). Пробовал также метод addClass, в котором просто бы добавлялся класс с нужными параметрами, но и с этим залет.

function clickSmaller() {
        const productCards = document.getElementsByClassName('product-card');
        productCards.classList.add('smallCard')
        }

Как сделать так, чтобы изменились параметры стиля всех элементов класса?

Answer 1

[Антон Спирин]

Стараться не использовать прямые обращения к элементам DOM в React разработке и использовать состояние компонента.

const Grid extends React.Component {
  state = { itemsSize: 'sm' };

  handleChangeSize = () => { /* some code */ };  

  render() {
    const { itemSize } = this.state;
    const { items } = this.props;

    return (
      <Wrapper>
        <ControlPanel onChangeSize={this.handleChangeSize} />
        {items.map(item => <Item key={item.id} size={this.state.itemSize} />)}
      </Wrapper>
    );
  }
}

Comments

[nivaech]

Но как это будет выглядеть, если изменяется состояние одного компонента другим компонентом?То есть как конкретно привязать функцию кнопки как отдельного компонента на изменение state другого компонента? Если у вас найдется пример - буду благодарен, пока что туго переходится на логику React

[Антон Спирин]

Nivaech, lifting state up.

[Павло Пономаренко]

Nivaech , лучше всего использовать какой-то State-manager, к примеру MobX