Как передать функцию на изменение state между children-компонентами?

Question

[nivaech]

Есть страница интернет магазина. Есть родительский компонент, который рендерит array из карточек товаров определенного размера. В parent компоненте есть два child-компонента - компонент самой карточки и компонент с фильтрами, в котором имеется кнопка, по нажатии на которою размер карточки должен изменяться путем добавления класса (для того, чтобы сетка уплотнилась и отображалось большее количество товаров в ряду).
Вот, собственно, основной компонент. В нем содержится state, который в виде props передается компоненту <ProductCard />, условия для замены класса и сама функция для изменения состояния. И тут же в виде props передается функция другому компоненту, <FilterBoxBras smallClick={this.smallClick} />, в котором по нажатию кнопки и должны происходить изменения.

export default class BrasWireless extends Component {
  state = {
    small: false
}
  smallClick = () => {
    this.setState(({small}) => {
        return {
            small: small
        }
    });
}
  render() {

    const {small} = this.state;

    let classNames = "product-card";
    if (small) {
          classNames += " smallCard";
        }

    const brasWirelessList = brasWireless.map(bra => <ProductCard
        key = {bra.id}
        imgSrc = {bra.imgSrc}
        imgOver = {bra.imgOver}
        imgOut = {bra.imgOut}
        title = {bra.title}
        category = {bra.category}
        price = {bra.price}
        classNames = {classNames}
        small = {this.state.small}
        />)
      
    return (
      <main>
        <div className="section-title-container">
            <SectionTitle title="Wireless" />
            <SectionProductsBras/>
        </div> 
        <FilterBoxBras smallClick={this.smallClick} /> 
        <div className="cards-container">
          {brasWirelessList}
        </div> 
      </main>
    );
  }
}

Вот компонент карточки, размер которой должен меняться.

export default class ProductCard extends Component {

    render () {
        const { imgSrc, imgOver, imgOut, category, title, price } = this.props;
        
        return (
            <div className={this.props.classNames} >
                <div className="product-thumb">
                    <img src={imgSrc} 
                        onMouseOver = {e => (e.currentTarget.src = imgOver)}
                        onMouseOut = {e => (e.currentTarget.src = imgOut)}
                        alt="" />                   
                </div>
                <div className="product-details">
                    <span className="product-category">{category}</span>
                    <h4>{title}</h4>
                    <div className="product-bottom-details">
                        <div className="product-price">${price}</div>
                        <div className="product-links">
                        <i className="fas fa-heart fa-2x"></i>
                            <i className="fas fa-shopping-cart fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        );
    };
};

И компонент с фильтрами, в который передается функция, и в котором и находится заветная кнопка.

export default class FilterBoxBras extends Component {
    render() {

        const { smallClick } = this.props;

        return(
            <div className = "filters-container">
                <div className="filter price-filter">Price</div>
                <div className="filter size-filter">Size</div>
                <div className="filter cup-filter">Cup</div>     
                <div className="flex-changers">
                    <div className="flex-btn-smaller">
                      <i id="smaller" className="fas fa-th" onClick={smallClick} ></i>
                    </div>
                    <div className="flex-btn-bigger">
                        <i id="bigger" className="fas fa-th-large"></i>
                    </div>
                </div>
            </div>
        )
    }
}

Что я делаю не так? Как правильно передать из родительского компонента данные для дочерних, и связать их между собой, чтобы все заработало?

Answer 1

[0xD34F]

this.setState(({small}) => {
    return {
        small: small
    }
});

То есть, было small, и осталось small. Наверное, всё-таки новое значение должно быть !small:

this.setState(({ small }) => ({
  small: !small,
}));

Comments

[nivaech]

Какой отличный незамыленный глаз. Слона-то я и не приметил, как говорится. Спасибо, помогли.