I correctly passed the data to the consumer using context api, however the product component doesn't display.
Listofproducts component:
import React, { Component } from "react";
import Product from "./product";
import { Consumer } from "./context";
class Listofproducts extends Component {
constructor(props) {
super(props);
this.state = {};
}
render() {
return (
<Consumer>
{value => {
value.map(data => {
console.log(data); // its returning the data correctly
return <Product key={data.id} product={data} />;
});
}}
</Consumer>
);
}
}
export default Listofproducts;
Product component where i sent the data with the consumer value:
import React, { Component } from "react";
class Product extends Component {
render() {
console.log(this.props.product); // not showing anything on the console nor an error
return <div>hello from product</div>;
}
}
export default Product;
Thank you in advance.