score:1

Accepted answer

i think the problem is in how you access to properties

// recipelistitem
const recipelistitem = (recipe: recipeconfig, props: any): jsx.element => { //here is wrong
  const { togglefavoriteaction, favorites } = props;
...
......
  <button onclick={() => togglefavoriteaction(recipe)}> // this button
     {favorites && favorites.find((fav: any) => fav.id === recipe.id)
       ? 'remove from fav'
       : 'add to fav'}
  </button>

should be

// recipelistitem
const recipelistitem = (props: any): jsx.element => {
  
  const { togglefavoriteaction, favorites, recipe } = props;
...
......
  <button onclick={() => togglefavoriteaction(recipe)}> // this button
     {favorites && favorites.find((fav: any) => fav.id === recipe.id)
       ? 'remove from fav'
       : 'add to fav'}
  </button>

both {...data} and {...props} that you pass to

 <recipelistitem {...data} {...props} />

are props

and you can access by the first argument of the react component

const recipelistitem = (props: any): jsx.element => {
....

Related Query

More Query from same tag