I have encountered an issue while utilizing the Context-Api in my project. I am attempting to use a function provided by a file within a lifecycle method, but since the function is not wrapped in a consumer, it's causing problems. After reviewing the documentation, I tried setting the value to context, however, this approach did not work as expected. Everything else seems to be functioning properly within my class component except for the componentDidMount method.
import { ProductConsumer } from '../context';
export default class Details1 extends Component {
componentDidMount() {
let value = this.context;
let id = this.props.match.params.id;
value.handleDetail(id);
}
render() {
return (
<ProductConsumer>
{value => {
const {
id,...
} = value.detailProduct;
return (
My Component
);
}}
</ProductConsumer>
)
};
export const Details = () => (
<Product.Consumer>
{context =>
<Details1 context={context}/>
}
</Product.Consumer>
)