score:0
there's a bunch of things i would change here. first of all @bennettdams is right in commenting that using refs really isn't the best way to go about this. in fact, you're probably seeing this warning telling you not to do this.
warning: failed prop type: you provided a
value
prop to a form field without anonchange
handler. this will render a read-only field. if the field should be mutable usedefaultvalue
. otherwise, set eitheronchange
orreadonly
.
when forwarding a ref, you need to pass the ref either directly to a dom element or to a component which forwards the ref. so you can set ref={ref}
on select
, but i'm not sure about dropdownselect
.
it looks like your options are just plain strings? react will like it better if you can use a unique key for each option. having your options as objects also allows you to select any type and not just strings. something like this:
interface option<t> {
key: string;
value: t;
label: string;
}
but i don't want to make this too complicated, so let's stick with the strings for now. what you want is something like this:
interface dropdownprops {
value: string;
onchangevalue(value: string): void;
options: string[];
}
const dropdown = (props: dropdownprops) => {
const { value, options, onchangevalue } = props;
return (
<select value={value} onchange={(e) => onchangevalue(e.target.value)}>
{options.map((option) => (
<option key={option} value={option}>
{option}
</option>
))}
</select>
);
};
Source: stackoverflow.com
Related Query
- React + Typescript referencing select element using useRef and forwardRef
- React search filter using select option and useRef
- React UseRef and forwardRef issue for an element position
- typesafe select onChange event using reactjs and typescript
- React - useRef with TypeScript and functional component
- Using React forwardRef with Typescript generic JSX arguments
- React hook useRef not working with styled-components and typescript
- How to use forwardRef with FunctionComponent in React Native using TypeScript
- React and using ReactDOM.createPortal() - Target container is not a DOM element Error
- Connecting a component with OwnProps using react redux and typescript in the .NET Core 2.0 reactredux template project
- TypeScript React - access video element by ref and call .play()
- Using typescript enum and react to expect string prop
- How to access an input element of type checkbox and name using react testing library?
- Element type is invalid error using react-native and react navigation
- Typescript error when using React useContext and useReducer
- Correct way to select dom element by className in React and Gatsby
- How to get a data after react select using axios and ReactJS?
- Typescript and React refs without using inline lambdas
- Unable to figure out how to highlight or select individual objects in InstancedMesh and display custom HTML tooltip using react three fiber
- How to mock useRef using jest.mock and react testing library
- Remove Event Handler using Abort Signal with Typescript and React
- How to set up a chrome extension using React and TypeScript with multiple pages and entry points?
- Using enum for event.target.value in Typescript and React
- How to fix the type error Type '(string | Element) [] is not assignable to type 'string | Element | undefined' using react and typescript?
- Showing a default value for a select control using react and material-ui control
- Using TypeScript with React HOC, React.lazy and forwarRef
- react dropdown using ref and select tag
- How to add the input field inside the select option using ant design and react
- Target container is not a DOM element using webpack 4 and React
- How to set focus on custom input in ReactJS using useRef and react hooks?
More Query from same tag
- auto fill in react doesn't work
- Property "id" does not exist on type "MyProps" (typescript)
- Simple prototype using react html
- event.Target value is null for react form using hooks to handle change
- How to import a React proptypes typed component as type any into a React Typescript component
- When flex column wraps, how can I make the second column not take up the full height of the first column?
- How to integrate getAccessToken with fetch function to load data from DRF backend to React Frontend?
- How to import Base64 PublicKey via WebCrypto "importKey" in ReactJS script?
- How to update NavBar component in React upon successful log-in and before logging in
- Curly braces declaring a variable in React
- How to remove items in React?
- add block-input from sanity.io to next.js blog post
- what is the reason of not reading the property of props variables?
- web3 react contract interaction
- How to toggle switch between celcius and fahrenheit in React.js?
- React JSX not being recognized?
- How to combine react-i18next with Semantic UI label tag?
- Showing a loading message until the blob file is downloaded
- ERROR: Cannot define class using reflection
- Is there any alternative way to call a react hook conditionally?
- ReactJS - React ContextMenu: Menu Appear behind scrollbar
- Testing click event
- Data disappears on refresh, but loads when modifying code in React Web App
- ReactJS key not showing
- React, set an 'option selected' based on a state value
- Does React has element like <template/> in vue which is only for wrapping stuffs but not has true effect on html's structure?
- Invalid Hook Call in ReactTS with Route
- State is empty in reducer
- Updating Redux store to remove something from array doesn't rerender
- How could I display in my front a back request?