Skip to content

Instantly share code, notes, and snippets.

@isabellachen
Last active October 25, 2019 10:00
Show Gist options
  • Save isabellachen/d8fd2ce8ddadff0a5105949e99e558ba to your computer and use it in GitHub Desktop.
Save isabellachen/d8fd2ce8ddadff0a5105949e99e558ba to your computer and use it in GitHub Desktop.
React Typescript: Common Troubles

When dealing with return data from React events, you might need to cast the data back to the original.

<InputMultiSelect
  value={chosenDataStorageUnit.map(f => f.value)}
/>
<InputMultiSelect
  value={chosenDataStorageUnit.map(f => f.value as string)}
/>

Set the type for useState functions. Extend functional component with Router and Translation Types.

export type FiltersModalProps = {
  updateIsFiltersModalOpen: Dispatch<SetStateAction<boolean>>;
} & RouteComponentProps & WithTranslation;

function FiltersModalComponent({updateIsFiltersModalOpen}: FiltersModalProps) {
  return <div/>
}

export const FiltersModal = withTranslation()(
  withRouter(FiltersModalComponent),
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment