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

Share Improve this question Follow edited May 25, 2022 at 20:11 Youssouf Oumar 46.6k1616 gold badges103103 silver badges105105 bronze badges asked May 25, 2022 at 19:50 AshburyAshbury 2,35633 gold badges3232 silver badges6363 bronze badges 1

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

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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.