Can't understand why my use of createContext and useContext is not working in my React application.
I have my context file like so:
// @flow
import { createContext, useContext } from "react";
export type CountryIndexProviderType = {
index: number,
};
const CountryContext = createContext<CountryIndexProviderType>({
index: 0,
});
type CountryContextProviderProps = {
children: Node,
index: number,
};
const CountryContextProvider = ({
children,
index,
}: CountryContextProviderProps) => {
return (
<CountryContext.Provider value={{ index }}>
{children}
</CountryContext.Provider>
);
};
const useCountryIndexContext = () => useContext(CountryContext);
export { CountryContext, CountryContextProvider, useCountryIndexContext };
And my component where I am using Provider to set the value of index (number):
import { CountryContextProvider } from "/EnteredCountriesContext";
return (
{objects.map((index) => (
<StyledWrappingContainer>
<StyledProgress>{index + 2}</StyledProgress>
<CountryContextProvider index={index}>
// NOT SURE WHAT SHOULD BE HERE?
</CountryContextProvider>
</StyledWrappingContainer>
))}
);
And my second component, where I am using useContext to pass the value of index to a styled component and render the value:
import { useCountryIndexContext } from "/EnteredCountriesContext";
const { index } = useCountryIndexContext();
<StyledWrappingContainer>
<StyledProgress>
<StyledProgress>{index + 2}</StyledProgress>
</StyledProgress>
</StyledWrappingContainer>
The second component is always rendering the default index value of 2 (default index = 0 + 2 added in render) - can anyone suggest why my index value is not being updated?
You can access the values from context after wrapping them inside the Provider.
In here:
return <CountryContext.Provider value={{ index }}></CountryContext.Provider>;
The Provider doesn't have any children, so index is never transfering to another component.
I suggest you use children prop.
const CountryContextProvider = ({ index,children }: CountryContextProviderProps) => {
return <CountryContext.Provider value={{ index }}>{children}</CountryContext.Provider>;
};
Finally pass any component that you want to use index from context, as children of CountryContextProvider:
import { CountryContextProvider } from "/EnteredCountriesContext";
return (
{objects.map((index) => (
<StyledWrappingContainer>
<StyledProgress>{index + 2}</StyledProgress>
<CountryContextProvider index={index}>
<YourSecondComponent /> /// can have any props it needs, not necessary.
</CountryContextProvider>
</StyledWrappingContainer>
))}
);
Now the YourSecondComponent, where you receive index.
import { useCountryIndexContext } from "/EnteredCountriesContext";
const { index } = useCountryIndexContext();
<StyledWrappingContainer>
<StyledProgress>
<StyledProgress>{index + 2}</StyledProgress>
</StyledProgress>
</StyledWrappingContainer>