NewPageFormComponent.js

const TestForm = ({ changeHandler,
  fields,
  action,
  validator,
  data,
  fieldError,
  isCreatedDataLoading,
  handleFormSubmission,
  confirmFieldValidations }) => {

    const newHasMaturityDateValue =
      action === "update"
        ? capitalize(data.hasMaturityDate.toString())
        : data.hasMaturityDate;
    return (
      <>
        <div className="row test-form-parent">
          <div className="col-md-6 col-12">
            <TextField
              label="Name"
              id="name"
              margin="normal"
              fullWidth
              multiline={false}
              value={data.name && data.name}
              onChange={changeHandler("name")}
              onBlur={() =>
                validator(
                  "name",
                  "Name",
                  fields
                    .filter(field => field.id === "name")
                    .map(field => field.rules)[0],
                  data.name
                )
              }
            />
            <p className="dynamic-error">
              {fieldError.name &&
                fieldError.name.map(error => <li>{error}</li>)}
            </p>
          </div>

          <div className="col-md-6 col-12">
            <TextField
              label="config"
              id="config"
              margin="normal"
              fullWidth
              multiline={true}
              value={data.config && data.config}
              onChange={changeHandler("config", "textarea")}
              onBlur={() =>
                validator(
                  "config",
                  "Config",
                  fields
                    .filter(field => field.id === "config")
                    .map(field => field.rules)[0],
                  data.config
                )
              }
            />
            <p className="dynamic-error">
              {fieldError.config &&
                fieldError.config.map(error => <li>{error}</li>)}
            </p>
          </div>
          <div className="col-md-12">
            
            <Button
              variant="contained"
              className="jr-btn jr-btn-lg bg-indigo lighten-1 text-white create-dialog mb-3"
              onMouseOver={confirmFieldValidations}
              onClick={handleFormSubmission}
            >
              <span>Create</span>
              {isCreatedDataLoading && (
                <CircularProgress size={18} color="white" />
              )}
            </Button>
          </div>
        </div>
      </>
    );
}

export default TestForm;