i have an array of generated radio buttons. when an element is clicked I need to get the checked id of the element & show the checked element as checked. following is my code. the way I have done it shows the label. but when it clicked it only gets the name of the clicked radio button.
<FormControl>
<RadioGroup name='cardsList' sx={{display: 'row',float:'right'}}
checked={this.state.cardNo}
value={this.state.cardNo} onChange={(e)=>this.checkCard(e)}>
<FormControlLabel value="0" control={<Radio />} name="0" label="Use Different Card"/>
{this.state.cardDetails.cardDetails.map((cards) => (
<FormControlLabel value={cards.cardId} label={`${cards.maskCardNo} ${cards.cardType}`}
control={<Radio />} name={cards.cardId} id={cards.cardId}/>
))}
</RadioGroup>
{this.state.cardNo === "0" ?
<FormControlLabel control={
<Switch
value="active"
checked={this.state.saveCard}
onChange={(e) =>this.saveCardYesNo(e)}
/>
} label="Save Card" />
: null
}
</FormControl>
checking function
checkCard(e){
console.log('checkid',Number(e.target.name))
this.setState({
cardNo: e.target.value
})
}
I am using Launch Darkley for feature flagging in my ReactJS WebApp.
I am trying to hide the Radio Button below with the following code but it is not working as expected - is there something I am missing?
<RadioGroup className={styles.radioRoleContainer} aria-label="Select role for searching" name="roles" value={role} onChange={handleRoleChange}>
<FormControlLabel value={customer} control={<Radio id="Customer" color="default" />} label="As a Customer" />
{!flags.showEmployee && <FormControlLabel value={employee} control={<Radio id="Employee" color="default" />} label="As an Employee" />}
<FormControlLabel value={admin} control={<Radio id="Admin" color="default" />} label="As an Administrator" />
</RadioGroup>
I am trying to either show or hide the Employee Radio Button based on the Flag value in Launch Darkley
I am using react material ui library
https://material-ui.com/components/checkboxes/
I need to have form group with checkbox and input type search inside. So i use the two components
from this library
<FormControl id="inline-form-group">
<FormLabel component="legend">Choose Columns:</FormLabel>
<FormGroup>
<FormControlLabel
control={<Checkbox checked={gilad} onChange={handleCheckboxesChange} name="gilad" />}
label="Gilad Gray"
/>
</FormGroup>
<FormGroup>
<TextField id="standard-search" label="Column value" type="search" />
</FormGroup>
</FormControl>
but now textfield is under the checkbox
I want to have them inline.
I can't find in their documentation option like this
In the label position of your FormControlLabel you could put in your TextField.
This would work if you don't need to have the Gilad Gray as your curretn label.
<FormControlLabel
control={<Checkbox checked={true} onChange={handleChange} name="jason" />}
label={<TextField />}
/>
```
I have used mui checkboxes by mapping them the following way:
<FormControl component="fieldset">
<FormGroup aria-label="position" column >
{sortedData.map((obj) => {
return (
<FormControlLabel
value="type"
control={<Checkbox color="primary"/>}
label={obj}
onChange={handleTypeCheckboxChange}
labelPlacement="end"
/>
);
})}
</FormGroup>
</FormControl>
This is how my checkboxes look like:
Now I need to set my Next button disabled, unless the user has selected one checkbox or more. Also, I want to store the values of the selected checkboxes in an array so that I can access it later. How should this work?
I have tried a couple of ways in order to make the material UI's autocomplete field of type required but I am not getting the behavior that I wanted. I had encapsulated my field inside react hook form <Controller/> yet no luck. I want to trigger message 'Field is mandatory' on submit when nothing is added to the field.
Below is the code snippet, I have not removed comments so that it becomes a bit easier for others to understand the approach that I had followed earlier -
<Controller
name="displayName"
as={
<Autocomplete
value={lists}
multiple
fullWidth
size="small"
limitTags={1}
id="multiple-limit-lists"
options={moduleList}
getOptionLabel={(option) => option.displayName}
renderInput={(params,props) => {
return (
<div>
<div className="container">
<TextValidator {...params} variant="outlined" label="Display Name*" className="Display Text"
name="displayName" id="outlined-multiline-static"
placeholder="Enter Display-Name" size="small"
onChange={handleDisplay}
// validators={['required']} this and below line does throw a validation but the problem is this validation stays on the screen when user selects something in the autocomplete field which is wrong.
// errorMessages={['This field is required']}
// withRequiredValidator
/>
</div>
</div>
)
}}
/>
}
// onChange={handleDisplay}
control={control}
rules={{ required: true }}
// required
// defaultValue={options[0]}
/>
<ErrorMessage errors={errors} name="displayName" message="This is required" />
You can use the following logic to get it worked. Though this might not be the best solution but works.
<Autocomplete
renderInput={(params) => (
<TextField
{...params}
label={value.length === 0 ? title : title + " *"} //handle required mark(*) on label
required={value.length === 0}
/>
)}
/>
I tried using the built in required in textfield for autocomplete, and it works like a charm. Maybe you can use this as a reference.
<Autocomplete
renderInput={(params) => {
<TextField {...params} required />
}
// Other codes
/>
Since you are rendering <TextValidator>, you should apply mandatory(required) attribute to that component not on <AutomComplete>.
Try this if your Material UI version is v5
<TextField
{...params}
required
label="Tags"
value={value}
InputProps={{
...params.InputProps,
required: value.length === 0,
}}
/>