Update Form Component

UpdateFormComponent.js

const StaticUpdateForm = ({ changeHandler, data, validator, confirmValidation, fieldErrors, onSubmit }) => {

    return (
      <div className='create-fgt-wrapper'>

        <div className="row">
          
            <form className="row fgt-form" noValidate autoComplete="off">
              <div className="col-md-6 col-12">
                <TextField
                  name="name"
                  label="Name"
                  value={data.name && data.name}
                  onChange={changeHandler('name')}
                  onBlur={() => validator('name', 'Name', {
                    required: true,
                    string: true,
                }, data.name)}
                  margin="normal"
                  fullWidth
                />
                <p className="marineAlertdanger fgt-error">{fieldErrors.name && fieldErrors.name.map((error) => <li key={error}>{error}</li>)}</p>
              </div>

              <div className="col-sm-6 fgt-radio">
                <FormControl component="fieldset" >
                  <FormLabel component="legend">Has Fixed Default Cycle</FormLabel>
                  <RadioGroup
                    className="d-flex flex-row"
                    aria-label="Has Fixed Default Cycle"
                    name="hasFixedDefaultCycle"
                    value={data.hasFixedDefaultCycle && data.hasFixedDefaultCycle}
                    onChange={changeHandler('hasFixedDefaultCycle')}
                    onBlur={() => validator('hasFixedDefaultCycle', 'Has Fixed Default Cycle', {
                      required: true,
                  }, data.hasFixedDefaultCycle)}
                  >
                    <FormControlLabel value="True" control={<Radio color="primary"/>} label="True"/>
                    <FormControlLabel value="False" control={<Radio color="primary"/>} label="False"/>
                    <p className="marineAlertdanger">{fieldErrors.hasFixedDefaultCycle && fieldErrors.hasFixedDefaultCycle.map((error) => <li key={error}>{error}</li>)}</p>
                  </RadioGroup>
                </FormControl>
              </div>


            <Button
              variant="contained"
              className="jr-btn jr-btn-lg bg-indigo lighten-1 text-white fgt-button"
              onClick={onSubmit}
              onMouseOver={confirmValidation}
            >
              <span>Create Funding Group Type</span>
            </Button> 
            {false && <div className="loader-view fgt-loader">
              <CircularProgress size={20}/>
            </div>}
        </form>
        </div>
      </div>
    );
}

export default StaticUpdateForm;