score:2

Accepted answer

you can take a look what type react.usestate() returns.

function usestate<s>(initialstate: s | (() => s)): [s, dispatch<setstateaction<s>>];

as you can see the setter has the type dispatch<setstateaction<s>>

if you go further down you see

type dispatch<a> = (value: a) => void;

so your setter must be a function type, that receives one parameter and returns void.

now let's have a look into setstateaction<a>

type setstateaction<s> = s | ((prevstate: s) => s);

it's either a simple value, or a function that receives the previous state and returns a new one.

so how to fix your types?

const recipe = (props: {
  recipe: irecipe;
  shoppinglist: string[];
  setshoppinglist: dispatch<setstateaction<string[]>>;
}) => {...}

or, if you don't plan to use the prevstate feature anyway you can simplify the type:

const recipe = (props: {
  recipe: irecipe;
  shoppinglist: string[];
  setshoppinglist: (value: string[]) => void;
}) => {...}

score:1

edit: my answer is extremely case specific. @hendra answer is much more complete and should be relied on.

in types.ts:

export type shoppinglist = string[];
export type setshoppinglist = react.dispatch<react.setstateaction<string[]>>;

in recipe.tsx:

import { irecipe, shoppinglist, setshoppinglist } from "../types";

const recipe = (props: {
  recipe: irecipe;
  shoppinglist: shoppinglist;
  setshoppinglist: setshoppinglist;
}) => {...

in app.tsx:

import { irecipe, shoppinglist as shoppinglisttype } from "./types";
...
const [shoppinglist, setshoppinglist] = usestate<shoppinglisttype>([]);
...
<recipe
  key={recipe.recipe.url}
  recipe={recipe}
  shoppinglist={shoppinglist}
  setshoppinglist={setshoppinglist}
/>

Related Query

More Query from same tag