I have developed a short questionnaire in React using Material-UI as shown below. I am pulling the questions from a json file I have that looks like the following:
[ {
"id": 1,
"question": "Which section 1 criterion are applicable?"
"criterion": ["1.1", "1.2", "1.3"]
"decision": "Yes"
},
{
"id": 2,
"question": "Which section 2 criterion are applicable?"
"criterion": ["2.1", "2.2", "2.3"]
"decision": "No"
},
...
]
At the start of the questionnaire, all criteria are added to applicableCriteria (shown below). Based on the user's responses, I am trying to remove criterion from applicableCriteria. For example, if the user responds 'Yes' to question 1, the list of criterion shown for the question with id=1 should be removed from applicableCriteria. I have experimented with some different things, but my novice JavaScript skills haven't gotten me far. Below is a working, error-free version of what I've been working with. Any tips on how I should go about this successfully?
import * as React from "react";
import TextField from "#mui/material/TextField";
import {
Button,
Radio,
RadioGroup,
FormControlLabel,
FormControl,
FormLabel,
FormHelperText,
FormGroup,
Checkbox,
Grid,
Box,
} from "#mui/material";
import { useForm } from "react-hook-form";
import Records from "./CriterionQuestions.json";
const QuestionnaireForm = () => {
const {
register,
handleSubmit,
watch,
formState: { errors },
} = useForm();
const onSubmit = (data) => console.log(data);
console.log(errors);
let applicableCriteria = [];
// Push all possible criteria to list
for (let q = 0; q < Records.length; q++) {
for (let c = 0; c < Records[q].criterion.length; c++) {
applicableCriteria.push(Records[q].criterion[c]);
}
}
return (
<div className="App__form">
<h1> Questionnaire </h1>
<h2>{applicableCriteria}</h2>
<form onSubmit={handleSubmit(onSubmit)}>
{/* Radio button */}
<FormControl error={Boolean(errors.question1)}>
<FormLabel component="legend">
{/* {" "}
Is the modification applicable to only fixed-wing and non-commercial
derivative aircraft?{" "} */}
{Records[0].question}
</FormLabel>
<RadioGroup row aria-label="question1" name="question1">
<FormControlLabel
value="yes"
control={
<Radio
{...register("question1", {
required: "Please select a response.",
})}
/>
}
label="Yes"
/>
<FormControlLabel
value="no"
control={
<Radio
{...register("question1", {
required: "Please select a response.",
})}
/>
}
label="No"
/>
</RadioGroup>
<FormHelperText style={{ color: "#d32f2f" }}>
{errors.question1?.message}
</FormHelperText>
</FormControl>
<FormControl error={Boolean(errors.question2)}>
<FormLabel component="legend">{Records[1].question}</FormLabel>
<RadioGroup row aria-label="question2" name="question2">
<FormControlLabel
value="yes"
control={
<Radio
{...register("question2", {
required: "Please select a response.",
})}
/>
}
label="Yes"
/>
<FormControlLabel
value="no"
control={
<Radio
{...register("question2", {
required: "Please select a response.",
})}
/>
}
label="No"
/>
</RadioGroup>
<FormHelperText style={{ color: "#d32f2f" }}>
{errors.question2?.message}
</FormHelperText>
</FormControl>
<div className="clearfix"></div>
<FormControl error={Boolean(errors.question8)}>
<FormLabel component="legend">{Records[7].question}</FormLabel>
<RadioGroup row aria-label="question8" name="question8">
<FormControlLabel
value="yes"
control={
<Radio
{...register("question8", {
required: "Please select a response.",
})}
/>
}
label="Yes"
/>
<FormControlLabel
value="no"
control={
<Radio
{...register("question8", {
required: "Please select a response.",
})}
/>
}
label="No"
/>
</RadioGroup>
<FormHelperText style={{ color: "#d32f2f" }}>
{errors.question8?.message}
</FormHelperText>
</FormControl>
<div className="clearfix"></div>
<FormControl error={Boolean(errors.question9)}>
<FormLabel component="legend">{Records[8].question}</FormLabel>
<RadioGroup row aria-label="question9" name="question9">
<FormControlLabel
value="yes"
control={
<Radio
{...register("question9", {
required: "Please select a response.",
})}
/>
}
label="Yes"
/>
<FormControlLabel
value="no"
control={
<Radio
{...register("question9", {
required: "Please select a response.",
})}
/>
}
label="No"
/>
</RadioGroup>
<FormHelperText style={{ color: "#d32f2f" }}>
{errors.question9?.message}
</FormHelperText>
</FormControl>
<div className="clearfix"></div>
<TextField
id="outlined-basic"
name="modName"
label="Modification Name"
variant="outlined"
fullWidth
{...register("modName", {
required: "Modification Name is required.",
})}
error={Boolean(errors.modName)}
helperText={errors.modName?.message}
/>
{/* Check box */}
<Box sx={{ paddingTop: 3 }} />
<div className="clearfix"></div>
<Button
variant="contained"
color="primary"
type="submit"
className="btns"
>
Submit Responses
</Button>
</form>
</div>
);
};
export default QuestionnaireForm;
I have Material UI radio buttons in my ReactJS form :
<FormControl className={ styles.rowControl }>
<FormLabel>Direction</FormLabel>
<RadioGroup name="direction" onChange={ this.setOption } ref={ this.directionGroupRef }>
<FormControlLabel
className={ styles.rowFirstLabel }
control={<Radio />}
label="North"
ref={ this.northRef }
value="North"
/>
<FormControlLabel
className={ styles.rowFirstLabel }
control={<Radio />}
label="South"
value="South"
/>
<FormControlLabel
className={ styles.rowFirstLabel }
control={<Radio />}
label="Flip-Flop"
value="Flip-Flop"
/>
</RadioGroup>
</FormControl>
How can I remove any checked statuses among these radio buttons when the form is submitted?
hello I'm trying to show and hide specific elements with checkbox material and what is happening now is when one checkbox is checked all the hidden divs are showing up.
You can see the problem here: https://stackblitz.com/edit/react-1ecdqb?file=demo.tsx
edit: I know that I need more variables in the state but I ask if there is a way to do it without state for each checkbox because there are gonna be 10 more checkboxes
const UninstallView = () => {
const [isChecked, setIsChecked] = useState(false);
const handleChange = event => {
if (event.target.checked) {
setIsChecked(true);
}
else {
setIsChecked(false);
}
}
return (
<div>
<FormGroup>
<FormControlLabel control={<Checkbox onChange={handleChange} />} label="simple isn't what I expected" />
{isChecked ? <TextField
id="filled-multiline-static"
label="What did you expect from simple?"
multiline
rows={4}
defaultValue=""
variant="filled"
/>
: '' }
</FormGroup>
<FormGroup>
<FormControlLabel control={<Checkbox onChange={handleChange} />} label="simple isn't working correctly" />
{isChecked ?
<div>
<h1>hello</h1>
</div>
: '' }
</FormGroup>
</div>
);
You are sharing 1 state across 2 checkboxes. You should have a separate state that holds the state for each checkbox.
This code may help:
const UninstallView = () => {
const [isFirstChecked, setIsFirstChecked] = useState(false);
const [isSecondChecked, setIsSecondChecked] = useState(false);
return (<div>
<FormGroup>
<FormControlLabel
control={<Checkbox onChange={() => setIsFirstChecked(!isFirstChecked)}/>}
label="simple isn't what I expected"/>
{isFirstChecked ? <TextField
id="filled-multiline-static"
label="What did you expect from simple?"
multiline
rows={4}
defaultValue=""
variant="filled"
/> : ''}
</FormGroup>
<FormGroup>
<FormControlLabel
control={<Checkbox onChange={() => setIsSecondChecked(!isSecondChecked)}/>}
label="simple isn't working correctly"/>
{isSecondChecked ? <div>
<h1>hello</h1>
</div> : ''}
</FormGroup>
</div>);
}
Sandbox example
I am trying to use Material UI's React rating component within a react-hook-form.
...
<form onSubmit={handleSubmit(onSubmit)}>
<FormControlLabel
control={
<Checkbox
inputRef={register}
name="remember"
defaultValue={false}
/>
}
label="remember"
/>
<br />
<FormControlLabel
control={
<Rating
inputRef={register}
name="rating"
defaultValue={2}
precision={1}
icon={<RadioButtonUncheckedIcon fontSize="inherit" />}
/>
}
label="select rating"
/>
<Button type="submit">
Submit
</Button>
</form>
...
I can't understand why the value from the rating component is not being registered but the checkbox's value is. Please find the code at https://codesandbox.io/s/suspicious-drake-1d0kx?file=/src/form.js (on submit, the rating's value is not printed to the console while the checkbox's value is).
According to the doc, Rating have no input element to pass ref to like TextField or Checkbox, so a solution is to create an hidden input in replacement to store the rating value
<FormControlLabel
control={
<>
<input
name="rating"
type="number"
value={rating}
ref={register}
hidden
readOnly
/>
<Rating
name="rating"
value={rating}
precision={1}
onChange={(_, value) => {
setRating(value);
}}
icon={<RadioButtonUncheckedIcon fontSize="inherit" />}
/>
</>
}
label="select rating"
/>
Below is the forked codesandbox link for the modification
var fname,
gender,
city = "";
this.props.data.map((row, index) => {
// console.log(index);
if (this.props.selectedVal === index) {
gender = row[0];
fname = row[1];
city = row[2];
}
return [];
});
return (
<div>
<Dialog
open={this.props.open}
onClose={this.handleClose}
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
>
<h1>Edit User</h1>
<DialogContent>
<DialogContentText id="alert-dialog-description" />
<form onSubmit={handleSubmit}>
<TextField
type="text"
margin="dense"
id="firstname"
label="Name"
onChange={handleChange}
value={fname}
{...props}
/>
<br />
<TextField
type="text"
margin="dense"
id="gender"
label="gender"
onChange={handleChange}
value={gender}
{...props}
/>
<br />
<TextField
type="text"
margin="dense"
id="city"
label="city"
onChange={handleChange}
value={city}
{...props}
/>
</form>
</DialogContent>
<DialogActions>
<Button onClick={this.handleClose} color="primary">
RESET
</Button>
<Button onClick={this.handleClose} color="primary" autoFocus>
SUBMIT
</Button>
</DialogActions>
</Dialog>
</div>
);
};
render() {
return (
<div align="center">
<Formik
initialValues={{
name: this.props.fname,
gender: this.props.gender,
city: this.props.city
}}
onSubmit={initialValues => console.log("values" + initialValues.name)}
render={this.form}
/>
</div>
);
}
}
Here i am getting the values from table while click on a specific row. I'm getting these values in a dialog using formik. Now i want to edit this formik form. I faced a problem. These values are not edited. How to edit these readonly values.
I added my codesandbox link codesandbox
The way you are doing things is not correct. Some of the functions which you are using never exist.
Here is the working demo of your code Codesandbox demo
Please take a look at the code and understand how it is transformed between two components and feel free to ask me if you have any queries/get stuck understanding the code.