CODEWITHSUNDEEP
reactjsmaterial-uireact-propsdestructuring
Ken
Ken

Reputation: 1

Spreading a component's props across two different child components in React

I am trying to create a custom email input component (for a form) that wraps a Material-UI TextField component inside a custom gridding component that I made. Ideally, I would like to be able to pass any TextField prop I want into this component and have it applied to the inner TextField component by spreading the props, but I also would like to be able to pass any props for the custom gridding component and apply them to the grid component also via spreading.

Example (where variant is a TextField prop and width is a CustomGrid prop):

// CustomEmailField.tsx

...

export const CustomEmailField: React.FC<TextFieldProps & CustomGridProps> = (props) => {
   return(
       <CustomGrid {...props as CustomGridProps}>
            <TextField {...props as TextFieldProps} />
       </CustomGrid>
   );
};

// index.tsx

...

const App = () => {
   return(
      <>
         <h1>Enter your email</h1>
         <CustomEmailField variant={'outlined'} width={2} />
      </>
   );
};

However, when spreading the props for the gridding component, I get an error message saying that the TextField props (variant in this example) do not exist for this gridding component, and likewise that the gridding component's props (width in this example) don't exist for the TextField component.

What would be a good way to solve this issue so that I can still have flexibility over the props I pass in to each (child) component without having to hardcode what props can be accepted by the email (parent) component?

Upvotes: 0

Views: 546

Answers (1)

Todd Skelton
Todd Skelton

Reputation: 7239

Just create a new props type.

export type CustomEmailFieldProps = {
   textField: TextFieldProps;
   customGrid: CustomGridProps;
}

export const CustomEmailField: React.FC<CustomEmailFieldProps> = ({textField, customGrid}) => {
   return(
       <CustomGrid {...customGrid}>
            <TextField {...textField} />
       </CustomGrid>
   );
};

To use just create an object of the props you want to pass to each.

// index.tsx

...

const App = () => {
   return(
      <>
         <h1>Enter your email</h1>
         <CustomEmailField textField={{variant: 'outlined'}} customGrid={{width: 2}} />
      </>
   );
};

Upvotes: 1

Related Questions