Last active
June 14, 2022 00:28
-
-
Save nfunato/73eece2b12fa707640519e88552f0ff5 to your computer and use it in GitHub Desktop.
about typing react18 context object in typescript
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React, { createContext, useState, FC } from "react"; | |
import uuidv4 from "uuidv4"; | |
import { getInitialColorDataList } from "./ColorDataList"; | |
export type ColorDataTyp = { | |
id: string; | |
title: string; | |
color: string; | |
rating: number; | |
}; | |
const initialColorDataList = getInitialColorDataList() | |
export type ColorContextTyp = { | |
colors: ColorDataTyp[]; | |
addColor: (a:string,b:string)=>void, | |
rateColor: (a:string,b:number)=>void | |
removeColor: (a:string)=>void | |
} | |
// See also | |
// - https://zenn.dev/nfunato/articles/typing-ccontext-arg (in Japanese) | |
// - https://github.com/nfunato/lr_6_4_4/blob/main/src/components/ColorProvider.tsx | |
// ERROR | |
// src/components/ColorProvider.tsx | |
// Line 31:31: React Hook "useState" is called in function "makeColorContextSeed" | |
// that is neither a React function component nor a custom React Hook function. | |
// React component names must start with an uppercase letter. React Hook names | |
// must start with the word "use" react-hooks/rules-of-hooks | |
function makeColorContextSeed () : ColorContextTyp { | |
const [colors, setColors] = useState<ColorDataTyp[]>(initialColorDataList); | |
const addColor = (title: string, color: string): void => { | |
setColors([...colors, { id: uuidv4(), rating: 0, title, color }]); | |
}; | |
const rateColor = (id: string, rating: number): void => { | |
setColors( | |
colors.map((color: ColorDataTyp) => | |
color.id === id ? { ...color, rating } : color | |
) | |
); | |
}; | |
const removeColor = (id: string): void => { | |
setColors(colors.filter((color: ColorDataTyp) => color.id !== id)); | |
}; | |
return { colors, addColor, rateColor, removeColor } | |
} | |
const colorContextSeed = makeColorContextSeed(); | |
export const ColorContext = createContext(colorContextSeed); | |
type Props = { | |
children: React.ReactNode; | |
}; | |
export const ColorProvider : FC<Props> = (props: Props) => { | |
return ( | |
<ColorContext.Provider value={ colorContextSeed }> | |
{props.children} | |
</ColorContext.Provider> | |
); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React, { createContext, useState, FC } from "react"; | |
import uuidv4 from "uuidv4"; | |
import { getInitialColorDataList } from "./ColorDataList"; | |
export type ColorDataTyp = { | |
id: string; | |
title: string; | |
color: string; | |
rating: number; | |
}; | |
const initialColorDataList = getInitialColorDataList() | |
export type ColorContextTyp = { | |
colors: ColorDataTyp[]; | |
addColor: (a:string,b:string)=>void, | |
rateColor: (a:string,b:number)=>void | |
removeColor: (a:string)=>void | |
} | |
// See also | |
// - https://zenn.dev/nfunato/articles/typing-ccontext-arg (in Japanese) | |
// - https://github.com/nfunato/lr_6_4_4/blob/main/src/components/ColorProvider.tsx | |
// これだとエラーは出ないが画面真っ白になる | |
const MakeColorContextSeed = () => { | |
const [colors, setColors] = useState<ColorDataTyp[]>(initialColorDataList); | |
const addColor = (title: string, color: string): void => { | |
setColors([...colors, { id: uuidv4(), rating: 0, title, color }]); | |
}; | |
const rateColor = (id: string, rating: number): void => { | |
setColors( | |
colors.map((color: ColorDataTyp) => | |
color.id === id ? { ...color, rating } : color | |
) | |
); | |
} | |
const removeColor = (id: string): void => { | |
setColors(colors.filter((color: ColorDataTyp) => color.id !== id)); | |
}; | |
return { colors, addColor, rateColor, removeColor } | |
} | |
const colorContextSeed = MakeColorContextSeed(); | |
export const ColorContext = createContext(colorContextSeed); | |
type Props = { | |
children: React.ReactNode; | |
}; | |
export const ColorProvider : FC<Props> = (props: Props) => { | |
return ( | |
<ColorContext.Provider value={ colorContextSeed }> | |
{props.children} | |
</ColorContext.Provider> | |
); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment