Home > OS >  how to pass useState setter and object together to child element in react typescript
how to pass useState setter and object together to child element in react typescript

Time:08-24

I have problem passing useState setter and object (both together) to the child component. Object was passed successfully just spreading it like this {...object}, but what is the syntax to pass setter along? code example:

<div>
  {array && array.map((item) => {
     return (
       <div key={item.id}>
          <Component {...item} setMyState={setMyState}/> ///perhaps it's wrong aproach
       </div>
     );
   })}
</div>

///inside child component

interface IProps {
  item: Item; /// of type item, that was imported from other file
  setMyState: ()=> void;
}
function Component(props:IProps) {
///return some elements
}

this gives error

"(property) IProps.setMyState: () => void Type 'Dispatch<SetStateAction<Item[]>>' is not assignable to type '() => void'"

setMyState hook takes entire Item of type Item and filters it so it is quite difficult to me to properly describe what type of data it requires. Entire Item is array of objects

EDIT: according suggestion I have edited code like this:

<div>
 {array && array.map((item) => {
    return (
      <div key={item.id}>
         <Component item={item} setMyState={setMyState}/>
      </div>
    );
  })}
</div>

///inside child component

interface IProps {
 item: Item; /// of type item, that was imported from other file
 setMyState: Dispatch<Item[]>;
}
function Component(props:IProps) {
///return some elements
}

Now props passes succesfully

CodePudding user response:

as it says in error, you can try specifying

setMyState: Dispatch<SetStateAction<Item[]>> 

CodePudding user response:

change the setMyState type to Dispatch<SetStateAction<Item[]

setMyState: Dispatch<SetStateAction<Item[]
  • Related