score:1
Accepted answer
one of the issues is that when you run props.onchange
, typescript doesn't actually know which one it's running.
with how you have it set up, you can get the typescript errors fixed by changing the onchange
function to:
onchange={(e: changeevent<{ name?: string; value: typeof props.value }>) =>{
if(props.multiple){
props.onchange(e.target.value as typeof props.value)
}else{
props.onchange(e.target.value as typeof props.value)
}
}}
here is one way to do a generic approach. for this, i wasn't sure how to make the multiple prop require true if the type was an array, so i just made that happen in the actual component using array#isarray
interface reportdateselectprops<type = string | string[]> {
value: type;
onchange: (value: type) => void;
}
function reportdateselect<type = string | string[]>(props: reportdateselectprops<type>): react.reactnode {
return (
<select
value={props.value}
onchange={(e: changeevent<{ name?: string; value: type }>) =>
props.onchange(e.target.value)
}
multiple={array.isarray(props.value)}
>
{[1, 2, 3].map((c, i) => (
<menuitem key={i} value={c}>
{c}
</menuitem>
))}
</select>
);
}
export default reportdateselect;
Source: stackoverflow.com
Related Query
- TypeScript generics: Props with union type in React
- problem with union and intersection type in react props
- Union type props in TypeScript & React
- Using Typescript generics for React Functional Components with eslint props validation
- how can i get proper type infer when useing union type with optional property as React props type
- React props type with TypeScript
- What does type Props mean in react and typescript when used with Omit?
- Union type doesn't allow if statement with Typescript and React
- TypeScript error "not assignable to type 'IntrinsicAttributes'" for React component with extended discriminated union
- How to use TypeScript generics with React render props
- How to specify (optional) default props with TypeScript for stateless, functional React components?
- React with Typescript -- Generics while using React.forwardRef
- React with Typescript - Type { } is missing the following properties from type
- React + Typescript: Type of React component with no state/no props
- TypeScript conditional types: Extract component props type from react component
- TS2339: Property 'focus' does not exist on type '{}'. with React typescript
- How do you correctly use React.lazy() in Typescript to import a react component with a generic type parameter?
- React with TypeScript - Type {...} is not assignable to type 'Readonly<S>'
- React + Typescript : TypeScript error: Type 'string' has no properties in common with type 'CSSProperties'
- Use TypeScript Enum with PropTypes to define React Component props
- Spread operator with React Props in Typescript (error: ...could be instantiated with a different subtype of constraint {})
- React with typescript - type safety with setState
- How to avoid redeclaring props type in React constructor using Typescript
- Infer generic type between 2 props in React TypeScript
- Creating reusable Button Component with React and Typescript with not assignable type error
- Is it possible to type a React function component with TypeScript without using arrow functions?
- Props is a deprecated symbol in React with Typescript
- React Custom Hook with Typescript Type error "Property 'x' does not exist on type 'interface | (({ target }: any) => void)'.ts(2339)"
- How to type a Typescript React Component that accepts a Context with a super-set of properties
- How do I define a TypeScript type for React props where prop B is only accepted if prop A is passed to a component?
More Query from same tag
- Rendering from a single document in Firestore database with React [forEach error]
- using React render in Autodesk ForgeViewer v7.+
- How to show "loading..." text as a placeholder before my Apexcharts actually loads?
- How can I insert into React's state array with setState?
- Add styling to child element using Styled Components?
- React : get Form values from children component on submit
- React Higher Order Component conditional data load
- Showing a VisX graph inside a Semantic-UI-React Modal causes problems with z-index
- How to render component onClick in React after passing props?
- react link send props
- Reload react component after updating state inside useEffect
- React GraphQL - How to return the results of a Query component as an object to use in React context
- Responsive font size for high resolutions not working in MUI 5
- React detect what is clicked outside a component
- Typescript React. Destruct and spread object
- html-docx-js is not abe to apply external css class styles when it creates docx file
- Updating Input type number in React Form
- Cannot find file: 'index.js' does not match the corresponding name on disk: '.\node_modules\Victory\es\victory'
- React Custom Hook with Context and Typescript: Property 'map' does not exist on type 'Option'
- Set state based on previous one in render function
- How to create an on and off toggle button for google maps react for a heatmap
- Cannot change state interface in react+typescript
- Force react component to only accept a child with a specific type
- can't extend react extended class
- Align text in AccordionSummary to the right?
- How to add SPFX package larger than 100 MB?
- React - “localStorage is not defined” error showing
- Overriding PrimeReact Styling
- React Router v4 Redirect with parameters
- Setting state inside event listener which is inside componentDidMount method