CODEWITHSUNDEEP
javascriptreactjsflowtypereact-context
cts
cts

Reputation: 1084

Flow type error: "number [1] is incompatible with `Number` [2] in property `index`" - using React context

using React context & I think the reason it might not be working is because of a type issue in Context file. The issue says:

Cannot call createContext with object literal bound to defaultValue because number [1] is incompatible with Number [2] in property index.Flow(incompatible-call)

// @flow
import React, { createContext, useContext } from "react";

export type CountryIndexProviderType = {
  index: Number,
};

const CountryContext = createContext<CountryIndexProviderType>({
  index: 0,
});

type CountryContextProviderProps = {
  index: Number,
};

const CountryContextProvider = ({ index }: CountryContextProviderProps) => {
  return <CountryContext.Provider value={{ index }}></CountryContext.Provider>;
};

const useCountryIndexContext = () => useContext(CountryContext);

export { CountryContext, CountryContextProvider, useCountryIndexContext };

COMPONENT 1:

import { CountryContextProvider } from "/EnteredCountriesContext";

return (
  <StyledWrappingContainer>
    <StyledProgress>{index + 2}</StyledProgress>
    <CountryContextProvider index={index}></CountryContextProvider>
  </StyledWrappingContainer>
);

COMPONENT 2:

import { useCountryIndexContext } from "/EnteredCountriesContext";
const { index } = useCountryIndexContext();

<StyledWrappingContainer>
   <StyledProgress>
      <StyledProgress>{index + 2}</StyledProgress>
   </StyledProgress>
</StyledWrappingContainer>

Can anyone spot what my issue might be?

Upvotes: 1

Views: 2069

Answers (1)

loganfsmyth
loganfsmyth

Reputation: 161497

You need to change

index: Number,

to be

index: number,

A Number is an object, number is a primitive type.

Upvotes: 3

Related Questions