title: Passing two props from parent to child component leads to undefined in parent
body: <p>In my react redux project, I am trying to pass props from a child component to a parent component. More specifically, I want to pass two pieces of information: product and counter, to the parent container, where both pieces of information are intended to be used inside the function, like this: </p>
  
  <pre><code>addProductToBasket(product, counter) {
  
  }
  </code></pre>
  
  <p>My problem is this: counter is not recognised in the addProductToBasket function, and I get this error message: </p>
  
  <blockquote>
    <p>Uncaught ReferenceError: counter is not defined</p>
  </blockquote>
  
  <p>Why isn't counter defined here, and how can I properly use it inside this function?</p>
  
  <p>Here is the relevant parent container code: </p>
  
  <pre><code>class Products extends React.Component {
      constructor(props) {
          super(props);
  
          this.state = {
              listOn: false,
              total: 0,
          }
  
          this.addProductToBasket = this.addProductToBasket.bind(this);
      }
  
      addProductToBasket(product, counter) {
          var price = Number(product.price);
          console.log(price);
          this.setState(prevState =&gt; ({
              total: prevState.total + price,
          }), 
          () =&gt; {
              var total = this.state.total
              console.log(counter);
              this.props.updateBasket(total, price, counter, product);
          })  
      }
  
      render() {
          const grid = this.props.products.map((product, i) =&gt; {
              return (
                  &lt;GridLayout
                      key={i}
                      name={product.name}
                      id={product.id}
                      description={product.description}
                      price={product.price}
                      addProductToBasket={() =&gt; this.addProductToBasket(product, counter)}
                  /&gt;
              );
          });
  
          return(
              &lt;Grid&gt;
                  &lt;Row&gt;
                        {grid}
                  &lt;/Row&gt;
              &lt;/Grid&gt;
          );
      }
  }
  
  function mapStateToProps(state) {
      return {
          products: state.products
      };
  }
  
  function mapDispatchToProps(dispatch) {
      return bindActionCreators({ updateBasket: updateBasket }, dispatch);
  }
  
  export default connect(mapStateToProps, mapDispatchToProps)(Products);
  </code></pre>
  
  <p>and the child component code: </p>
  
  <pre><code>export default class GridLayout extends React.Component {
      constructor(props) {
          super(props);
  
          this.state = {
              counter: 0,
          }
  
          this.handleAdd = this.handleAdd.bind(this);
      }
  
      handleAdd(product) {
          this.setState({counter: this.state.counter + 1}, () =&gt; {
              var counter = this.state.counter
              console.log('counter is' + counter)
              this.props.addProductToBasket(product, counter);
          });  
      }
  
      render() {
          return(
              &lt;Col xs={12} md={4}&gt;
                  &lt;div style={{padding: '10px', backgroundColor: 'white', height: '120px', width: '100%'}}&gt;
                      &lt;div&gt;{this.props.id}&lt;/div&gt;
                      &lt;div&gt;{this.props.name}&lt;/div&gt;
                      &lt;div&gt;{this.props.description}&lt;/div&gt;
                      &lt;div&gt;$ {this.props.price}&lt;/div&gt;
                      &lt;div style={{float: 'right', cursor: 'pointer'}} onClick={this.handleAdd}&gt;
                          +
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/Col&gt;
          );
      }
  }
  </code></pre>