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[]