component does not render inside map

Question

The react component does not render inside the map method. I am calling the Product component by using the map method in ProductList and it does not render. outside the map method, it works. I have tried to find the problem but still couldn't. do I miss something?

context.js

import React, { Component } from 'react';
import {storeProducts,detailProduct} from './data';

const ProductContext=React.createContext();

class ProductProvider extends Component{

    constructor(props)
    {
        super(props);
        this.state={
            products:storeProducts,
            detailProduct:detailProduct
        }
    }

    render()
    {
        return(
            <ProductContext.Provider value={{...this.state}}>
             {this.props.children}
            </ProductContext.Provider>
        );
    }
}


const ProductConsumer=ProductContext.Consumer;

export {ProductContext,ProductProvider,ProductConsumer};

ProductList.js

class ProductList extends Component {

 render() {
    return(
      <React.Fragment>
         <ProductConsumer>
              {
                 value=> {
                      value.products.map(prod=>(
                            <div>
                               {console.log(prod)}
                               <Product/> // this component does not render
                            </div>
                      ))
                  }
               }
          </ProductConsumer>
       </React.Fragment>
   );
 }
}

Product.js

class Product extends Component {
    render() {
        return (
            <div>
                <h2>Hello From Product</h2>
            </div>
        );
    }
}

index.js

<ProductProvider>
    <Router>
    <App />
    </Router>
</ProductProvider>

Answer 1

I believe you are missing a return infront of value.products.map(prod=>(. Something like:

class ProductList extends Component {
  render() {
    return (
      <React.Fragment>
        <ProductConsumer>
          {(value) => {
            return value.products.map((prod) => (
              <div>
                {console.log(prod)}
                <Product /> 
              </div>
            ));
          }}
        </ProductConsumer>
      </React.Fragment>
    );
  }
}