title: How to pass session details to a functional component in react?
body: <p>I have a functional component which accepts props implemented using Reactjs. Inside the functional component, I want to access the Session Id (or userID). Therefore, I have implemented the component as follow,</p>
  
  <pre><code>import React from 'react';
  
  import styled from 'styled-components';
  import {Link} from "react-router-dom";
  import {ProductConsumer} from "../context";
  import {connect} from "react-redux";
  
  const mapStateToProps = ({ session}) =&gt; ({
      session
  });
  
  const Product = (props, {session}) =&gt;  {
  
      const {_id, name, img, price } = props.products;
  
      const addToCartHandler = () =&gt; {
  
          const item = {
              userId: session.userId,
              productId: _id,
              name: name,
              price: price,
              qty: 1
          };
  
          props.addToCart(item)
  
          console.log('sent')
      };
  
          return (
  
              &lt;ProductWrapper className = "col-9 mx-auto col-md-6 col-lg-3 my-3"&gt;
                  &lt;div className="card"&gt;
                      &lt;ProductConsumer&gt;
                          {value =&gt; (
                              &lt;div className="img-container p-5 " &gt;
                                  &lt;Link to="/ProductDetails"&gt;
                                      &lt;img src={img} alt = "product" className="card-img-top"/&gt;
                                  &lt;/Link&gt;
  
  
                                  &lt;button className="cart-btn"  onClick={addToCartHandler}&gt;
                                      &lt;i className="fas fa-cart-plus"/&gt;
                                  &lt;/button&gt;
  
                              &lt;/div&gt;
                          )}
                      &lt;/ProductConsumer&gt;
  
                      &lt;div className="card-footer d-flex justify-content-between"&gt;
                          &lt;p className="align-self-center mb-0"&gt;
                              {name }
                          &lt;/p&gt;
  
                          &lt;h5 className="text-blue font-italic mb-0"&gt;
                              &lt;span className="mr-1"&gt;$&lt;/span&gt;
                              {price }
                          &lt;/h5&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/ProductWrapper&gt;
  
          );
  
  
  
  }
  
  const ProductWrapper = styled.div`
      //some css
  `
  
  export default connect(
      mapStateToProps
  )(Product);
  </code></pre>
  
  <p>When I implement the functional component as <code>const Product = (props, {session}) =&gt; {//rest of the impementation}</code>, it accept the props but does not get the session values(it says 'undefined'). And when I pass only the session like <code>const Product = ({session}) =&gt; {//rest of the impementation}</code>, it gets the session details. But I want to pass both props and session into the component and I don't understand how to achieve it. Can someone please help me?</p>