ReactJS: get data from form

Question

I have an array of questions that is being fetched and added to the state, it looks like that:

gigApplication: {
    title: 'Tell me about you',
    questions: [
      {
        title: 'do you know german?',
        type: 'radiobox',
        options: ['yes', 'no']
      },
      {
        title: 'what are you hobbies?',
        type: 'input',
        options: []
      },
      {
        title: 'do you know any of the following languages?',
        type: 'checkbox',
        options: ['spanish', 'italian', 'chinese', 'portuguese', 'esperanto']
      },
      {
        title: 'what countries what you been to??',
        type: 'checkbox',
        options: ['brazil', 'china', 'france']
      }
    ]
  }

and then I'm rendering it according to the questions type

render() {
    const { handleClose, openApply, gigApplication, classes, fullScreen } = this.props;
    const questions = gigApplication.questions.map((question, index) => {
      if (question.type === 'input') {
        return (
          <DialogContent key={question.title} className={classes.dialogContent}>
            <DialogContentText>{question.title}</DialogContentText>
            <TextField margin="dense" id="name" type="email" fullWidth />
          </DialogContent>
        );
      }
      if (question.type === 'checkbox') {
        return (
          <DialogContent key={question.title} className={classes.dialogContent}>
            <DialogContentText>{question.title}</DialogContentText>
            {question.options.map(option => (
              <FormControlLabel
                key={option}
                control={
                  <Checkbox
                    checked={this.state.jason}
                    // onChange={this.handleCheckBox(option)}
                    color="primary"
                    value={option}
                    name={question.title}
                    onClick={this.handleCheckBox(option, question, index)}
                  />
                }
                label={option}
              />
            ))}
          </DialogContent>
        );
      }
      if (question.type === 'radiobox') {
        return (
          <DialogContent key={question.title} className={classes.dialogContent}>
            <DialogContentText>{question.title}</DialogContentText>
            {question.options.map(option => (
              <RadioGroup
                 key={option}
                 name={question.title}
                 className={classes.group}
                 value="yes"
                 value={option}
                 onChange={this.handleChange}
               >
                <FormControlLabel
                  name={question.title}
                  value={option}
                  control={<Radio color="primary" />}
                  label={option}
                />
              </RadioGroup>
            ))}
          </DialogContent>
        );
      }
    });
    return (
      <FormControl onSubmit={this.handleSubmit}>
        <Dialog
          fullWidth
          className={classes.dialog}
          open={openApply}
          onClose={handleClose}
          fullScreen={fullScreen}
          aria-labelledby="form-dialog-title"
        >
          <DialogTitle id="form-dialog-title">{gigApplication.title}</DialogTitle>
          {/* questions come from the const above */}
          {questions}
          <DialogActions>
            <Button onClick={handleClose} color="primary">
              Cancel
            </Button>
            {/* <Button onClick={handleClose} color="primary">
              Send Application
            </Button> */}
            <Button type="submit" color="primary">
              Send
            </Button>
          </DialogActions>
        </Dialog>
      </FormControl>
    );
  }
}

I'm using material-ui.

What's the best way to get the data the user enters in those inputs when s/he submits the form?

I can't figure out an easy way to acomplish that. Is there are function that gets all the data from the form when its submited ?

Answer 1

The most idiomatic to React would be to use the parent component's state to store the form values. During handling a submit event you can access it easily.

// class method
onChange = e => this.setState({
  [e.target.name]: e.target.type === 'checkbox'
    ? e.target.checked
    : e.target.value,
});

// somewhere in render
<TextField onChange={this.onChange} margin="dense" id="name" type="email" fullWidth />
...
<Checkbox
  checked={this.state.jason}
  onChange={this.onChange}
  color="primary"
  value={option}
  name={question.title}
  onClick={this.handleCheckBox(option, question, index)}
/>

Answer 2

Have it update the state on onChange . Call a function and pass in the question object. Then set the state. Your state will always be up to date with form and when you submit you can just get the current state