Update react context provider value using child component - reactjs

Question

I have created a provider that is doing API call and setting data inside provider using value
//context
export const ProductContext = createContext({
loading: false,
data: null,
});
export function useProductContext() {
const context = useContext(ProductContext);
return context;
}
//provider
export const ProductProvider = ({ children, id }) => {
const { data, error, loading } = fetch({url},'id');
const value = useMemo(
() => ({
data
}),
[data],
);
return (
<ProductContext.Provider value={value}>
{children}
</ProductContext.Provider>
);
};
// component
const Card = (): JSX.Element => {
const { data } = useProductContext();
return (
<StyledSection>
<button onClick={}>fetch data with new params</button>
</StyledSection>
);
};
export default Card;
Here in component i want to fetch data when user click on button with different params.

Answer 1

So you want to fetch Data from the value you are given. Here is the way that I'll do this.
//Context
export const ProductContext = createContext();
export const ProductProvider = ({children}) => {
const fetchData = (val) => fetch(`fetch/${val}`);
return (
<ProductContext.Provider value={{fetchData}}>
{children}
</ProductContext.Provider>
);
};
As you can see in my context above I have my fetchData method there. Which accepts an argument.
Note: Make sure you have wrapped your root component with the above Provider.
In my component, I'll do it like this,
//Component
import {useContext} from 'react';
import {ProductContext} from '{your path here}/ProductContext';
const Card = () => {
const {fetchData} = useContext(ProductContext);
return (
<StyledSection>
<button onClick={() => fetchData('pass your value here')}>fetch data with new params</button>
</StyledSection>
);
}
export default Card
I believe this is the most simplest way you can achieve your task.