React, passing state setter (useState) to child component with TypeScript

user_1751977 0
Viewed 780

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'

typescript reactjs javascript
2 Answers

Should be

function Child({ setName } : { setName: Dispatch<SetStateAction<string>>}){

Child component accepts props, which is an object, not just setName value

user_191988120

You could do it with the help of FC from React, if you want for example to be explicit about the return as well:

import { Dispatch, SetStateAction, FC} from "react";

interface ChildPropsType {
  setName: Dispatch<SetStateAction<string>>
}
const Child : FC<ChildPropsType> = ({setName}) => {
  return (
    <>
      <Input onChange={
        (value as string)=>{
          setName(value);
        }
      </Input>
    </>
  )
}
export default Child;

For the onChange part I'm a doing a type cast as I don't know how this Input looks like.

user_152886410
Related