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 an onchange handler. this will render a read-only field. if the field should be mutable use defaultvalue. otherwise, set either onchange or readonly.

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>
  );
};

Related Query

More Query from same tag