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 => {
....
Source: stackoverflow.com
Related Query
- React router v4.2.2: using a string instead of function inside component prop of Route results in error
- Typescript React/ styled-components - passing function as prop to component throws error on missing type
- Passing memoized function down into React Component as a prop causes Typescript error which I can't fix
- Passing function as a prop results in an error?
- Typescript React/Nextjs styled-components - passing function as prop to component throws error on missing type
- Passing a function as a prop to a functional component
- Difference between passing component to Route as prop and wrapping component in render function
- Arrow function passing a variable within a prop within a .map
- TypeScript error passing prop to styled-components
- passing function as prop, undefined error
- Passing a function as a prop to a Typescript React Functional Component
- Warning when passing a function to a wrapped component prop
- Passing a function to Child Component through a Prop using ReactJS
- Prop undefined when passing to a function in another .js file
- Passing a function as a prop in React
- ReactJS error when passing a function as a props
- Passing function prop to child component (via Link and Route components)
- Prevent passing a new function as a prop in a functional component that uses useState
- Gets icon prop and passing it into styled() function
- What is the difference between passing a function as a prop with or without parentheses in React?
- Adding an arrow function to input field results an error
- Switching to mui5 sx prop from makeStyles- typescript error (no overload matches this call) passing object with position
- Passing a Prop in an On Click Function in React/Redux
- Nextjs getStaticProps error when passing an object as prop instead of plain string
- React component throwing TypeScript error for function passed in as prop
- Passing a function as a prop to update state in parent component in react
- infinate loop while passing function as prop react
- TS error using css "position" when passing style object to Emotion's css prop
- Passing a callback function with arguments coming from different components as a prop
- JavaScript React: Issues with passing prop from a function in a child component to a function in the parent
More Query from same tag
- set a default callback to react setState() function
- React-Bootstrap modal only show and delete last mapped element
- Pomodoro Clock (using React Hooks) countdown does not start
- React create a queue of data for offline use
- Mapping on useState object
- React.js: How to show base64 image with ImageField of react-admin
- How to test redux action by onClick with enzyme
- How can i parse simple json response in fetch call
- Apply button 'Active' styles on keypress in React
- unable to handle multiple checks in Nested Table of Ant Design
- filtering a mapped object based on React Router
- I am not receiving all the data in the req on JWT renew function
- React & Fuse js with TypeScript
- How to handle POST request in reactjs?
- How to format all my vscode files from 4 space indentation to 2 spaces?
- I am having trouble adding data to my table on submit
- Lodash - how to pick only one item at a time from nested json?
- React Native 0.64 won't build iOS app after updating Xcode to 12.5 and iOS to 14.5
- Change input value in admin-on-rest from another component
- explicit-function-return-type creating functional component react in typescript
- How to I stop executing the rest and return error message if error happens in Nodejs?
- React: How to change opacity of element by clicking button?
- cant read cookie in nextjs ssr
- Webpack: Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object
- React Unable to play audio
- Looping Lists with onClick Doesn't Work React
- I am able to move into next step in antd step form even though i have added validation in react.js
- How to pass props to a router?
- Material UI Range Min Max Error: Cannot read property 'focus' of null
- Conditionally importing npm modules?