CODEWITHSUNDEEP
reactjstypescriptmaterial-uireact-props
Salo Avalos
Salo Avalos

Reputation: 110

How to conditional use props in a Material UI TextField component

I want to create a general component based on Material UI TextField in conjunction with Formik

I have already handle the rest of the props, but I don't know how to do it with value and onChange,

I can solve the problem by using 2 functions for onChange, but I find it annoying to have to use onChangeDefault as a function and manually do setFielValue() when it could be done automatically if I didn't modify onChange, if I play with onChange it forgets its default behavior which is setFieldValue()

onChange={customOnChange || onChangeDefault}

I know it's not possible but it would be something like this

<Field
   isUsingCustomOnChange && onChange={customOnChange()}
/>

  <Field
   as={TextFieldStyled}
   label={inputLabel}
   name={inputName}
   // ------------------------
   onChange={
     customOnChangeMethod ? customOnChangeMethod : don't do anything as if I didn´t modify the onChange
   }
   value={
     customValue ? customValue : use default value
   }
   // ------------------------
  />

Upvotes: 5

Views: 1350

Answers (1)

Hamed Siaban
Hamed Siaban

Reputation: 1682

You can do something like this:

function MyFormField({
  isDisabled,
  inputLabel,
  inputName,
  hasError,
  onChange,
  customOnChange = null,
  value,
  customValue = null
  //otherProps
}) {
  return (
    <TextField
      disabled={isDisabled}
      label={inputLabel}
      name={inputName}
      error={hasError}
      //other props
      onChange={customOnChange || onChange}
      value={customValue || value}
    />
  );
}

So customValue and customOnChange are optional and are null by default. They will be used only when you put them in the component props.

<MyFormField
  // these are common between all your form fields:
  value={value}
  onChange={handleChange}
  //these you can put wherever you like and will override the previous ones:
  customValue={customValue}
  customOnChange={handleCustomChange}
  //...other props
/>

Edit:

In order to make value and onCahnge optional, you can use default function parameters for them too.

(onChange = null,
customOnChange = null,
value = null,
customValue = null,)

But you need to be careful because you may forget to provide both default and customized props when calling your component, and you wouldn't see any error, but your code will break because both props are null.

Typescript version

Types that have ? are optional.

function MyFormField({
  isDisabled,
  inputLabel,
  inputName,
  hasError,
  //other props
  onChange = null,
  customOnChange = null,
  value = null,
  customValue = null,
}: {
  isDisabled: boolean;
  inputLabel: string;
  inputName: string;
  hasError: boolean;
  //other props types
  //change these 'any' types based on your desired design:
  onChange?: any;
  customOnChange?: any;
  value?: any;
  customValue?: any;
}) {
  return (
    <TextField
      disabled={isDisabled}
      label={inputLabel}
      name={inputName}
      error={hasError}
      //other props
      onChange={customOnChange || onChange}
      value={customValue || value}
    />
  );
}

Upvotes: 2

Related Questions