ReactJS: get data from form

The name of the pictureThe name of the pictureThe name of the pictureClash Royale CLAN TAG#URR8PPP


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.

Popular posts from this blog

Makefile test if variable is not empty

Will Oldham

Visual Studio Code: How to configure includePath for better IntelliSense results