Question 300522 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Can I create two kinds of helperText in MUI React?

I am new to both MUI and React, but in an effort to keep smaller stuff off our overworked devs’ plates, I’m tackling a couple of things. One of those is: I’m attempting to retroactively add some descriptive helperText to a few fields. At present, we’re already set up for error helperText; I need to be able to do this without taking away that capability.

Here’s our current FormInputText.tsx:

import { Controller } from "react-hook-form";
import TextField from "@mui/material/TextField";
import { FormInputProps } from "./FormInputProps";
import { FormHelperText } from "@mui/material";

export const FormInputText = ({
  name,
  control,
  label,
  required = false,
  type = "text",
  disabled = false,
  big = false,
  score = false,
}: FormInputProps) => {
  return (
    <Controller
      name={name}
      control={control}
      render={({
        field: { onChange, value },
        fieldState: { error },
        formState,
      }) => {
        return (
          <TextField
            style={{ marginBottom: "25px" }}
            helperText={error ? error.message : null}
            size={!big ? "small" : "medium"}
            error={!!error}
            onChange={onChange}
            fullWidth
            label={label}
            variant="outlined"
            value={value}
            required={required}
            type={type}
            disabled={disabled}
          />
        );
      }}
    />
  );
};

How can I modify this to allow non-error-type helperText?

Many thanks in advance!

Tags:

2

Answers


  1. 0

    Currently you show helperText only if error is true, and you can pass one more prop to FormInputText called helperText = "" (by default), and replace your code from helperText={error ? error.message : null} to helperText={error ? error.message : helperText}. So now if you pass helperText prop to FormInputText, and error is false, it will display it.

    Login or Signup to reply.
  2. 0

    To add non-error-type helper text to your FormInputText component, you can use FormHelperText from Material-Ui here is your modified code

    import { Controller } from "react-hook-form";
import TextField from "@mui/material/TextField";
import { FormInputProps } from "./FormInputProps";
import { FormHelperText } from "@mui/material";

export const FormInputText = ({
  name,
  control,
  label,
  required = false,
  type = "text",
  disabled = false,
  big = false,
  score = false,
  helperText, // new prop for non-error helper text
}: FormInputProps) => {
  return (
    <Controller
      name={name}
      control={control}
      render={({
        field: { onChange, value },
        fieldState: { error },
        formState,
      }) => {
        return (
          <>
            <TextField
              style={{ marginBottom: "25px" }}
              helperText={error ? error.message : helperText} // use new prop for helper text
              size={!big ? "small" : "medium"}
              error={!!error}
              onChange={onChange}
              fullWidth
              label={label}
              variant="outlined"
              value={value}
              required={required}
              type={type}
              disabled={disabled}
            />
            // If you want to display error message as well
            {error && (
              <FormHelperText error>
                {error.message}
              </FormHelperText>
            )}
          </>
        );
      }}
    />
  );
};

    As you can see in this modificated code, I added a new prop helperText to the component. Now, you can pass the non-error helper text when using the FormInputText component. If the error is present, it will display the error message otherwise, it will display the helperText prop.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search