NewsletterFormView.js

const NewsletterFormView = (props) => {
  const classes = useStyles();

  const {
    model: {
      isLoading,
      isValid,
      fields: { newsletter },
    },
    onFieldChange,
    onSubmit,
  } = props;

  const [selectedNewsletter, setSelectedNewsletter] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault();

    onSubmit();
  };

  const handleFullNameChange = (e) => {
    e.preventDefault();

    const {
      target: { value },
    } = e;

    onFieldChange({ field: "fullName", value });
  };

  const handleNewsletterChange = (e) => {
    e.preventDefault();

    const {
      target: { value },
    } = e;

    setSelectedNewsletter(value);

    onFieldChange({ field: "newsletter", value });
  };

  return (
    <div>
      <Typography variant="h6" gutterBottom>
        Subscribe to a newsletter
      </Typography>

      {isLoading ? (
        <CircularProgress />
      ) : (
        <form onSubmit={handleSubmit} noValidate autoComplete="off">
          <TextField
            id="full-name"
            className={classes.formField}
            label="Full name"
            variant="filled"
            fullWidth
            required
            onChange={(e) => handleFullNameChange(e)}
          />

          <FormControl
            variant="filled"
            className={classes.formField}
            fullWidth
            required
          >
            <InputLabel id="newsletter">Newsletter</InputLabel>
            <Select
              id="newsletter"
              value={selectedNewsletter}
              onChange={(e) => handleNewsletterChange(e)}
            >
              {newsletter.options.map(({ label, value }) => (
                <MenuItem key={value} value={value}>
                  {label}
                </MenuItem>
              ))}
            </Select>
          </FormControl>

          <Button
            type="submit"
            variant="contained"
            color="primary"
            disabled={!isValid}
          >
            Subscribe
          </Button>
        </form>
      )}
    </div>
  );
};