I'm having a hard time figuring out the types when passing the useState setter function to a child component.
I've tried to simplify to just the essential code below:
parent
function Parent() {
const [name, setName] = useState("Structured")
..
return (
<>
<Child setName={setName}/>
</>
child
import { Dispatch, SetStateAction } from "react";
function Child(setName: Dispatch<SetStateAction<string>>){
return (
<>
<Input onChange={
(value)=>{
setName(value: SetStateAction<string>)
console.log(value)
}
</Input>
</>
On the parent I'm getting the following errors:
Type "{ setName: Dispatch<SetStateAction>; }' is not assignable to type ' IntrinsicAttributes & Dispatch<SetStateAction' Property 'setName' does not exist on type 'IntrinsicAttributes & Dispatch<SetStateAction>'.
On the child I'm getting:
Argument of type "string | string[]' is not assignable to parameter of type 'SetStateAction' Type "string[]' is not assignable to type "SetStateAction'
Should be
function Child({ setName } : { setName: Dispatch<SetStateAction<string>>}){
Child component accepts props, which is an object, not just setName value
You could type your React functional component with the help of FC from React, if you wanna a fully React component. If not, for example you cannot access children form props, as it is not known as a React component.
For the
onChangepart I'm a doing a cast for now as I don't know how thisInputlook like. Can you show it ?
import { Dispatch, SetStateAction, FC} from "react";
interface ChildPropsType {
setName: Dispatch<SetStateAction<string>>
}
/*
I'm using an interface for convenience, you can
replace it with { setName: Dispatch<SetStateAction<string>> }
*/
const Child : FC<ChildPropsType> = ({setName}) => {
return (
<>
<Input onChange={
(value as string)=>{
setName(value);
}
</Input>
</>
)
}
export default Child;