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'

CodePudding user response：

You should type your React functional component with the help of FC from React. 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;

CodePudding user response：

Should be

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

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