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

typescript playground

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;

typescript playground


Related Query

More Query from same tag