score:0
You should also be able to tell Typescript to expect a number if item exists by supplying a type for item.
export interface MeetingListProps {
onPressItem: (id: number) => void; //here define the onPressItem
}
type IItem = {
id: number;
title: string;
};
type IQuery = () => {
data: { meetings: IItem[] };
loading: boolean;
error: {};
};
const useGetMeetingsQuery: IQuery = () => {
return { data: { meetings: [] }, loading: true, error: {} };
};
export default function Item(props: MeetingListProps) {
const { onPressItem } = props;
const { data, loading, error } = useGetMeetingsQuery();
return (
<div>
{data?.meetings &&
data.meetings.map((item) => {
return (
<div>
<p onClick={() => onPressItem(item?.id)}>{item?.title}</p>
</div>
);
})}
</div>
);
}
score:2
When you use optional chaining (?.
syntax) the result value can be either your value (item.id) or undefined if the item is null or undefined. So the type of item?.id
is number | undefined
. The simple solution is to remove the optional chaining operator if your array does not have null-ish values inside, or check for the item before calling the function onPressItem
onPress={() => item ? onPressItem(item.id) : {}}
Source: stackoverflow.com
Related Query
- Type 'undefined' is not assignable to type 'number' while passing the id
- TS2322: Type '{ text: string; }' is not assignable to type 'string'. while passing prop
- Type 'never[]' is not assignable to type 'never'. TS2322 in passing to the value of ContextProvider using createContext Hook
- How to fix the error type Item[] | undefined is not assignable to Item[] type using react and typescript?
- How to fix the error argument of type string or undefined is not assignable to parameter of type string using typescript and react?
- React Typescript error in TextArea : Type 'string' is not assignable to type number
- Argument of type 'string | null' is not assignable to parameter of type 'ValueFn<SVGPathElement, Datum[], string | number | boolean | null>'
- useRef throws not assignable to type LegacyRef<Slider> | undefined
- How to fix the type error Type '(string | Element) [] is not assignable to type 'string | Element | undefined' using react and typescript?
- Image is not rendering in the DOM while passing as props in the App.js file?
- Type 'number | { percent: number; }' is not assignable to type 'string | number | undefined' ts(2322)
- How to solve the error 'Warning: React.createElement: type should not be null, undefined in React?
- React Query return undefined data while in network tab the data exists but it does not show on the page
- Why is TypeScript telling me "Type '{ walletAddress: string; }' is not assignable to type 'string'.ts(2322)" even though I am passing a string?
- passing file as prop in react typescript (Type 'true' is not assignable to type 'ChangeEventHandler<HTMLInputElement>)
- Type is not assignable to type | Learning type script and story book at the same time
- while building infinite loading via API in REACT , the page number is not updating in console even when i scroll down a lot
- Typescript error Type 'string | undefined' does not satisfy the constraint 'string | number | symbol'
- Why's one of my useQuery hooks not returning undefined while the other one is?
- "Argument of type 'string' is not assignable to parameter of type never" in the parameter of the function call to get a value from an object key
- Generics in TypeScript - Type is not assignable to type (missing the following properties)
- How to solve `Type 'string[] | undefined' is not assignable to type 'string[]'.` in the best way possible?
- Type 'string[] | undefined' is not assignable to type 'string[]'. even though I'm using the ?. (optional)
- Why does passing the plot type ('scatter', 'bar', etc.) as string variable does not work? (using <Plot ... /> from react-plotly.js)
- Why does TS give the following error in my case: Argument of type 'number' is not assignable to parameter of type 'never'?
- how do I pass parameters to the function on onClick? (Error: 'void' is not assignable to type )
- TypeScript Error (TS2345) argument of type Person | undefined is not assignable to paramater of type Person
- Not able to render pdf by passing Uint8Array in the viewer.html file parameter while using pdfjs
- Getting a "Type is not assignable to type FunctionComponent<Props>" and "Type is missing the following properties from type 'React Element<any, any>'
- How to fix the date[] is not assignable to type [date?, date?] in react hook
More Query from same tag
- Check if window.location.reload is invoked in JEST
- How to pass props from child component to its parent of parent?
- Unable change the state in componentDidMount properly
- How to determine in URQL if data is returned from cache or server
- Nextjs Bootstrap Dropdown issue with server side rendering
- React ApolloClient mutations
- Can't update multiple state properties at the same time on my React App
- React: Pass value of HTML element to event handler onClick
- How to test in JEST a request that downloads a file
- How to FadeOut / FadeIn content with ReactJS at onClick event?
- Input not re-rendering onChange with hooks
- Webpack + React + Typescript
- React Composition vs Inheritance
- How to create a reusable function in React
- Formik, Material UI Autocomplete and Firestore - where query to find the array parameter
- How to load a React Component in an existing jQuery application on jQuery click
- How can I set min time on a MUI TextField of type='time'?
- npm material-ui-table-edit loader
- Getting redux-form values in onChange event
- REact.js, react-toolbox syntax error?
- How to set .htaccess in React app (create-react-app) to display images
- Delete an item from an Array that is inside an object (redux/typescript/react)
- Use search icon with react-select v2
- How to get a Bearer access_token to embed a PowerBi Report using PowerBiEmbed React component in MS Teams context?
- React Pass Props to a Stateless Functional Component
- Tailwind Typography plugin doesn't change font style of heading tags from default size
- Using ComponentDidMount to load data before page renders - React
- React Hook UseEffect in combination with Firebase creating infinite loop
- Next.js React app not showing custom component content
- How to set a loading state for react component while sorting and filtering data?