How to pass a function to change the state between children-components?

Question

JavaScript

There is an online store page. There is a parent component that renders an array of product cards of a certain size. The parent component has two child components - the component of the card itself and the component with filters, in which there is a button, upon clicking on which the size of the card should be changed by adding a class (in order for the grid to thicken and display more products in a row).
Here is the main component. It contains state, which is passed to the component in the form of props, conditions for replacing the class, and the function itself for changing the state. And right there, in the form of props, the function is passed to another component, in which, when the button is pressed, changes should occur.

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>
    );
  }
}

Here is the card component that needs to be resized.

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>
        );
    };
};

And a component with filters, to which the function is passed, and in which the treasured button is located.

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>
        )
    }
}

Tell me what am I doing wrong? How to correctly transfer data from the parent component to the child ones, and connect them together so that everything works? Thanks to.

Answer 1

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

That is, it was small, and remains small. Maybe there should still be a new value !small?