Typescript React Functional Component With Multiple Props Type

Question

I am using react "react": "^17.0.0", function component to pass parameter like this:

interface RoleProps {
  roles: IRoleState
  dispatch: Dispatch
  roleListLoading: boolean
}

const EditPermission: React.FC<RoleProps> = ({roles, dispatch, roleListLoading}) => {
}

but I still want to pass another parameter into the function component by using props like this:

<EditPermission
        onSubmit={async (value) => {
          if(!currentRow){
            return
          }
          const success = await handleUpdate(value,currentRow.id);
          if (success) {
            handleUpdateModalVisible(false);
            setCurrentRow(undefined);
            if (actionRef.current) {
              actionRef.current.reload();
            }
          }
        }}
        onCancel={() => {
          handleUpdateModalVisible(false);
          setCurrentRow(undefined);
        }}
        updateModalVisible={editPermissionModalVisible}
        values={currentRow || {}}
      />

I have alredy define the props like this:

export type UpdateFormProps = {
  onCancel: (flag?: boolean, formVals?: FormValueType) => void;
  onSubmit: (values: FormValueType) => Promise<void>;
  updateModalVisible: boolean;
  values: Partial<API.InterviewListItem>;
};

what should I do to pass both parameter into the function component? is it possible to pass both parameter into component?

I didn't understand the question but, doesn't React.FC<RoleProps & UpdateFormProps> solve it? — Ugur Eren
– Ugur Eren, Commented Apr 16, 2022 at 15:22

Ammar Oker · Accepted Answer · 2022-04-17 07:22:21Z

3

To use both types on the same component, you can extend RoleProps interface with UpdateFormProps type. something like this

interface RoleProps extends UpdateFormProps {
  roles: IRoleState
  dispatch: Dispatch
  roleListLoading: boolean
}

Now you can use the props from UpdateFormProps like this

const EditPermission: React.FC<RoleProps> = ({roles, dispatch, roleListLoading, onCancel, onSubmit, updateModalVisible, values}) => {
  //
}

edited Apr 17, 2022 at 7:22

answered Apr 16, 2022 at 15:30

Ammar Oker

82110 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Hakim Abdelcadir · Accepted Answer · 2022-04-16 15:30:37Z

1

If you want to make sure that you pass all the props of the interface RoleProps OR all the props of the type UpdateFormProps then you can do this:

const EditPermission: React.FC<RoleProps | UpdateFormProps> = ...

answered Apr 16, 2022 at 15:30

Hakim Abdelcadir

1,3266 silver badges15 bronze badges

Collectives™ on Stack Overflow

Typescript React Functional Component With Multiple Props Type

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related