title: How to Pass Props data from render to handleSubmit function in redux
body: <p>I fetched products data and render in html using <code>{this.props.products.map(product =&gt; { &lt;h1&gt; {product.productName} &lt;/h1&gt; } )};</code>
  Now i want this productName and other details in handleSubmit function.</p>
  <p>But when i click <code>&lt;button type=&quot;submit&quot; class=&quot;pro-btn&quot;&gt;&lt;i class=&quot;icon-basket&quot;&gt;&lt;/i&gt;&lt;/button&gt;</code>, i got pid, pname and all values <strong>Undefined</strong> in console.</p>
  <pre><code>import React, { Component } from 'react';
  import { connect } from 'react-redux';
  import { Link } from 'react-router-dom';
  import { getProducts } from '../actions/productsAction';
  import { addToCart } from '../actions/cartAction';
  
  class Shop extends Component {
  
    constructor(props) {
      super(props);
  
      this.state = {
        pid: '',
        pname: '',
        pprice: '',
        pimg: '',
        qty: '',
        total_price: ''
      };
    }   
  
    componentDidMount() {
      this.props.getProducts();
      
      let getValue = localStorage.getItem(&quot;userData&quot;);     
      this.setState({ 
        getValue: JSON.parse(getValue), 
      });   
    }
  
    handleChange = (event) =&gt; {
      this.setState({ [event.target.name]: event.target.value });
    };
  
    handleSubmit = (event) =&gt; {
      event.preventDefault();
      const pid = this.props.products.pid;
      const pname = this.props.products.pname;
      const pprice = this.props.products.pprice;
      const pimg = this.props.products.pimg;
      const qty = &quot;1&quot;;
      const total_price = this.props.products.total_price;
      const email = this.state.getValue.email;
      const CartData = {pid: pid, pname: pname, pprice: pprice, pimg: pimg, qty:qty, total_price:total_price, email:email}
      this.props.addToCart(CartData);
      console.log('*****',CartData);
    };
  
    render() {
        return (
          &lt;div&gt;      
             &lt;div class=&quot;product-tab bg-white pt-80 pb-50&quot;&gt;
                &lt;div class=&quot;container&quot;&gt;
                    &lt;div class=&quot;row&quot;&gt;
                        &lt;div class=&quot;col-lg-9 mb-30&quot;&gt;                          
                            &lt;div class=&quot;tab-content&quot; id=&quot;pills-tabContent&quot;&gt;                              
                                &lt;div class=&quot;tab-pane fade show active&quot; id=&quot;pills-home&quot; role=&quot;tabpanel&quot;
                                    aria-labelledby=&quot;pills-home-tab&quot;&gt;
                                    &lt;div class=&quot;row grid-view theme1&quot;&gt;
                                      {this.props.products.map(product =&gt; {
                                       return ( 
                                        &lt;div class=&quot;col-sm-6 col-lg-4 col-xl-3 mb-30&quot; key={product._id}&gt;
                                            &lt;div class=&quot;card product-card&quot;&gt;
                                                &lt;div class=&quot;card-body&quot;&gt;
                                                    &lt;div class=&quot;product-thumbnail position-relative&quot;&gt;
                                                        &lt;span class=&quot;badge badge-danger top-right&quot;&gt;New&lt;/span&gt;
                                                        &lt;Link to={`/productinfo/${product._id}`}&gt;
                                                            &lt;img class=&quot;first-img&quot; src=&quot;assets/img/product/1.jpg&quot; alt=&quot;thumbnail&quot; /&gt;
                                                        &lt;/Link&gt;
                                                                                                              
                                                    &lt;/div&gt;
                                                    &lt;div class=&quot;product-desc py-0&quot;&gt;
                                                        &lt;h3 class=&quot;title&quot;&gt;&lt;a href=&quot;shop-grid-4-column.html&quot;&gt;{product.pname}&lt;/a&gt;&lt;/h3&gt;
                                                        
                                                        &lt;div class=&quot;d-flex align-items-center justify-content-between&quot;&gt;
                                                            &lt;h6 class=&quot;product-price&quot;&gt;Rs. {product.pprice}&lt;/h6&gt;
                                                            &lt;form onSubmit={ this.handleSubmit }&gt;
                                                              &lt;input type=&quot;hidden&quot; onChange={this.handleChange} name=&quot;pid&quot; defaultValue={product._id} /&gt;  
                                                              &lt;input type=&quot;hidden&quot; onChange={this.handleChange} name=&quot;pname&quot; defaultValue={product.pname} /&gt;  
                                                              &lt;input type=&quot;hidden&quot; onChange={this.handleChange} name=&quot;pprice&quot; defaultValue={product.pprice} /&gt;  
                                                              &lt;input type=&quot;hidden&quot; onChange={this.handleChange} name=&quot;qty&quot; defaultValue=&quot;1&quot; /&gt;  
                                                              &lt;input type=&quot;hidden&quot; onChange={this.handleChange} name=&quot;pimage&quot; defaultValue={product.pimg} /&gt;
                                                              &lt;input type=&quot;hidden&quot; onChange={this.handleChange} name=&quot;total_price&quot; defaultValue={product.pprice} /&gt;
                                                              &lt;button type=&quot;submit&quot; class=&quot;pro-btn&quot;&gt;&lt;i class=&quot;icon-basket&quot;&gt;&lt;/i&gt;&lt;/button&gt;
                                                            &lt;/form&gt; 
                                                        &lt;/div&gt;
                                                    &lt;/div&gt;
                                                &lt;/div&gt;
                                            &lt;/div&gt;                                          
                                        &lt;/div&gt;
                                       );
                                      })}                                        
                                    &lt;/div&gt;
                                &lt;/div&gt;                              
                            &lt;/div&gt;                         
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt; 
          &lt;/div&gt;
        )     
    }
  }
  
  const mapStateToProps = (state) =&gt; ({ products: state.products });
  
  const mapDispatchToProps = { addToCart, getProducts };
  
  export default connect(mapStateToProps, mapDispatchToProps)(Shop);
  </code></pre>