Clash Royale CLAN TAG

ReactJS: get data from form

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 ?

1 Answer
1

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

onChange

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.