score:2
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}
/>
Source: stackoverflow.com
Related Query
- React Router: props aren't passed down when directly accessing the URL of child component. Will I need to use the same state in both parent and child?
- Use-State hook passing props down to child
- When I set state via useState in parent component, my props in the child I'm passing down to are undefined
- Connecting child components to store vs connecting parent component to store and passing down props
- Passing state as props from Parent to Child in React-Router?
- Use of Context API vs CloneElement for passing down props for direct descendent
- Passing state down as props in React
- Passing Props from State to Child
- React - Passing state from child to parent in drop down select
- Update state on Parent component from input in Child using props and useState Hook
- React Context API, set context state from Child Components instead of passing functions as props
- Passing props and state to child component
- passing state value to a child component via props
- React not passing state to child via props
- Access Relay state without passing down props
- reactjs passing array of objects from parent state by props to child
- Can't use state value as props for child component
- Passing down use state values gives undefined
- Passing state down into a prop to child component, accessing it inline with "(this.props.(propHere))" coming up undefined due to "This"
- Passing state into child component as props not working
- How can i initialize state by passing props from parent component to child component in ReactJS?
- State from custom hook using use reducer updates in parent but not child
- React - passing props down to child syntax issue
- Passing Props down to children, without importing the child component
- Closing react-bootstrap popup modal by passing function from parent component to child component via props not updating state
- How to set state in onChange when you pass down props to child component?
- Reactjs: how to modify dynamic child component state or props from parent?
- React: Passing down props to functional components
- Updating state with props on React child component
- Can you pass down state to child components with React Hooks?
More Query from same tag
- how to search endpoint from the server using Star Wars SWAPI API
- Simple way to update form values depending on changes with react-final-form
- used an API. import and in components>DrinkList.js handleTextShow function not running
- Pass data to React component with kefirjs
- localStorage gets old value when setting it with a Promise
- How do we style the DOM that is created by the material-ui in ReactJS?
- Can't resolve radium
- TypeError: schema[sync ? 'validateSync' : 'validate'] is not a function
- Override shouldcomponentupdate with HOC
- Entry module not found: Error: Can't resolve './src/index.js'
- Why is the state not updating inside this react Hooks component?
- fetch() retrieved data in JS (React) throws error with no apparent reason
- How do i pass a value from child component to parent component using function?
- cant update context state when using hooks with a complex object to set providers value
- There is a better way to redirect from a url to another in ReactJS?
- React fetch and setting state
- why my setTimeOut gives me Proxy Object in Mobx, react.js
- How to implement ListView in ReactNative with custom cell component?
- how to open a png file (' �PNG ') on the front end?
- React Component this.variable not rendering
- Are there ways by which we can improve the performance of a React App when it has 2 awaits in the useEffect?
- Test a button of a child component in the parent component
- React-card-flip flips all cards on one click
- Why does setState not change state inside useEffect?
- Display Loading spinner whilst data is fetching
- Access nested JSON in React table
- Retrieve select value with redux-form
- React router not working after building the app
- Why does this React component return the string '0'
- How can I wait until I get the dispatch result in React