I'm having a hard time figuring out the types when passing the useState setter function to a child ponent.

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'

I'm having a hard time figuring out the types when passing the useState setter function to a child ponent.

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'

• javascript
• reactjs
• typescript

• 1 Child(setName: Dispatch<SetStateAction<string>>) shoud be Child({setName: Dispatch<SetStateAction<string>>}) – pta Commented May 25, 2022 at 20:28

2 Answers 2

Should be

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

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

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.