//**Step 4 */
function References({reference, onReferenceChange, hasError}) {
    return(
        <Grid container spacing={4}>
            <Grid item xs={12} sm={6}>
                <FormControl fullWidth>
                    <TextField
                        value={reference.familiar_reference_fullname}
                        onChange={ev => onReferenceChange({...reference, familiar_reference_fullname: ev.target.value})}
                        error={hasError && minLenght(reference.familiar_reference_fullname, 10)}
                        helperText={hasError && minLenght(reference.familiar_reference_fullname, 10) && "Campo requerido"}
                        label="Nombre completo de un familiar:"
                        margin="normal"
                        required
                    />
                </FormControl>
            </Grid>
            <Grid item xs={12} sm={6}>
                <FormControl component="fieldset">
                    <FormLabel component="legend">Es Socio</FormLabel>
                    <RadioGroup 
                        aria-label="gender" 
                        name="familiar_reference_parter" 
                        value={reference.familiar_reference_parter} 
                        onChange={ev => onReferenceChange({...reference, familiar_reference_parter: Number(ev.target.value)})}>
                        <FormControlLabel value={1} control={<Radio />} label="Si" />
                        <FormControlLabel value={2} control={<Radio />} label="No" />
                    </RadioGroup>
                </FormControl>
            </Grid>
            <Grid item xs={12} sm={6}>
                <FormControl fullWidth>
                    <TextField
                        values={reference.familiar_reference_address}
                        onChange={ev => onReferenceChange({...reference, familiar_reference_address: ev.target.value})}
                        error={hasError && minLenght(reference.familiar_reference_address, 20)}
                        helperText={hasError && minLenght(reference.familiar_reference_address, 20) && "Campo requerido"}
                        label="Domicilio (Calle, numero, colonia, ciudad, estado, cp):"
                        margin="normal"
                        required
                    />
                </FormControl>
            </Grid>
            <Grid item xs={12} sm={6}>
                <FormControl fullWidth>
                    <TextField
                        value={reference.familiar_reference_phone}
                        onChange={ev => onReferenceChange({...reference, familiar_reference_phone: ev.target.value})}
                        error={hasError && minLenght(reference.familiar_reference_phone, 6)}
                        helperText={hasError && minLenght(reference.familiar_reference_phone, 6) && "Campo requerido"}
                        label="Telefono:"
                        margin="normal"
                        type="number"
                        required
                    />
                </FormControl>
            </Grid>
            <Grid item xs={12} sm={6}>
                <FormControl fullWidth>
                    <TextField
                        value={reference.no_familiar_reference_fullname}
                        onChange={ev => onReferenceChange({...reference, no_familiar_reference_fullname:ev.target.value })}
                        error={hasError && minLenght(reference.no_familiar_reference_fullname, 10)}
                        helperText={hasError && minLenght(reference.no_familiar_reference_fullname, 10) && "Campo requerido"}
                        label="Nombre Completo de Referencia no Familiar:"
                        margin="normal"
                        required
                    />
                </FormControl>
            </Grid>
            <Grid item xs={12} sm={6}>
                <FormControl component="fieldset">
                    <FormLabel component="legend">Es Socio</FormLabel>
                    <RadioGroup
                        aria-label="gender" 
                        name="no_familiar_reference_parter" 
                        value={reference.no_familiar_reference_parter} 
                        onChange={ev => onReferenceChange({...reference, no_familiar_reference_parter: Number(ev.target.value)})}>
                        <FormControlLabel value={1} control={<Radio />} label="Si" />
                        <FormControlLabel value={2} control={<Radio />} label="No" />
                    </RadioGroup>
                </FormControl>
            </Grid>
            <Grid item xs={12} sm={6}>
                <FormControl fullWidth>
                    <TextField
                        value={reference.no_familiar_reference_address}
                        onChange={ev => onReferenceChange({...reference, no_familiar_reference_address: ev.target.value})}
                        error={hasError && minLenght(reference.no_familiar_reference_address, 20)}
                        helperText={hasError && minLenght(reference.no_familiar_reference_address, 20) && "Campo requerido"}
                        label="Domicilio Calle, numero, colonia, ciudad, estado, cp):"
                        margin="normal"
                        required
                    />
                </FormControl>
            </Grid>
            <Grid item xs={12} sm={6}>
                <FormControl fullWidth>
                    <TextField
                        value={reference.no_familiar_reference_phone}
                        onChange={ev => onReferenceChange({...reference, no_familiar_reference_phone: ev.target.value})}
                        error={hasError && minLenght(reference.no_familiar_reference_phone, 6)}
                        helperText={hasError && minLenght(reference.no_familiar_reference_phone, 6) && "Campo requerido"}
                        label="Teléfono:"
                        margin="normal"
                        type="number"
                        required
                    />
                </FormControl>
            </Grid>
        </Grid>
    )
}