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

Question

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'

Answer 1

Should be

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

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

Answer 2

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 onChange part I'm a doing a cast for now as I don't know how this Input look 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;