Q: How to pass session details to a functional component in react? 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,
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}) => ({
    session
});

const Product = (props, {session}) =>  {

    const {_id, name, img, price } = props.products;

    const addToCartHandler = () => {

        const item = {
            userId: session.userId,
            productId: _id,
            name: name,
            price: price,
            qty: 1
        };

        props.addToCart(item)

        console.log('sent')
    };

        return (

            <ProductWrapper className = "col-9 mx-auto col-md-6 col-lg-3 my-3">
                <div className="card">
                    <ProductConsumer>
                        {value => (
                            <div className="img-container p-5 " >
                                <Link to="/ProductDetails">
                                    <img src={img} alt = "product" className="card-img-top"/>
                                </Link>


                                <button className="cart-btn"  onClick={addToCartHandler}>
                                    <i className="fas fa-cart-plus"/>
                                </button>

                            </div>
                        )}
                    </ProductConsumer>

                    <div className="card-footer d-flex justify-content-between">
                        <p className="align-self-center mb-0">
                            {name }
                        </p>

                        <h5 className="text-blue font-italic mb-0">
                            <span className="mr-1">$</span>
                            {price }
                        </h5>
                    </div>
                </div>
            </ProductWrapper>

        );



}

const ProductWrapper = styled.div`
    //some css
`

export default connect(
    mapStateToProps
)(Product);

When I implement the functional component as const Product = (props, {session}) => {//rest of the impementation}, it accept the props but does not get the session values(it says 'undefined'). And when I pass only the session like const Product = ({session}) => {//rest of the impementation}, 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?
