My goal is to have two checkbox items, where the user can only select ONE or select NONE. While one is selected, the other should be disabled. I have this so far, but it is not working as I expected.
If there is a better way to this overall, please let me know!!
I have a class component with the following content:
constructor(props) {
super(props);
this.state = {
aSelected: false,
bSelected: false
}
}
handleCheckboxChange = (e) => {
const { checked, value } = e.target;
console.log( 'checked: ', checked );
if(value=="a") {
this.setState( {aSelected: checked}, () => {
console.log('aSelected: ', this.state.aSelected);
console.log("---")
});
}
if(value=="b") {
this.setState( {bSelected: checked}, () => {
// console.log('bSelected: ', this.state.bSelected);
// console.log("---")
});
}
}
Somewhere inside the render return, I have this:
<input>
type="checkbox"
value="a"
onChange={this.handleCheckboxChange}
disabled={ (this.state.aSelected || (!this.state.aSelected && !this.state.bSelected) ) ? false : true}
</input>
<input>
type="checkbox"
value="b"
onChange={this.handleCheckboxChange}
disabled={ (this.state.bSelected || (!this.state.aSelected && !this.state.bSelected) ) ? false : true}
</input>
Problems I'm having:
The disabled behavior is NOT matching up with how I detailed it in the first line.
this.state.aSelected and this.state.bSelected always log false no matter how many times I select and unselect the checkbox. The checked value is correctly toggled, though. (Below is the ouput for toggling the "a checkbox"):
I'm new in react and redux so I am puzzled with how to make my situation work.
What I'm trying to achieve is on the first step of the wizard there will be a radio button when clicked, it will set a value for a dropdown on the next step. the fields affected will be a country list which if selected on the first step it will be selected on the next, the other one is if an adult selection is made it will set the age range (dropdown list) from 18-99 years of age.
The code is pretty much the same as this https://redux-form.com/8.2.2/examples/wizard/ instead i'm dealing with dropdown list for setting the default value.
<Field name="age_from" placeholder="Select age from" validate={ [validate.required] } onChange={this.onChangeAgeFrom} component={SelectComponent} options={this.state.ageFromOptions} />
===========================================================
onChangeAgeFrom = (value, newValue) => {
console.log('>', newValue, value);
this.setState({
ageFrom: newValue,
ageToOptions: _range(newValue + 1, 100).map(i => ({value: i, label: i}))
})
}
======================================================
{page === 1 && <General
onSubmit={this.nextPage} labels={labels} />}
{page === 2 && (
<ProfileForm
projectId={projectId}
previousState={location.state}
ageCategory={this.state.ageCategory}
previousPage={this.previousPage}
location={location}
onSubmit={this.nextPage} />
)}
========================================================
<Field
className="styled-checkbox"
name="ageCategory"
id="is-adult"
value="adult"
onChange={event => this.onChangeAgeCategory(event.target.value)}
component="input"
type="radio"
/>
===================================================
onChangeAgeCategory = (value) => {
this.setState({
ageCategory: value,
age_from: value == 'adult' ? 18 : 0,
age_to: value == 'adult' ? 99 : 19
})
}
I create a state dynamically, but I need use this state in my render.
See my issue:
handleChange = (name, checked) => {
this.setState({
[name]: checked,
})
}
So, in my render how can I display my [name] state? (I don't know his name, since it's dynamic)
render(){
console.log(this.state....?)
return(
<p>Hello</p>
)
}
My function handleChange is called when I checked my checbkox. So, if I have 5, 10, 20 checkboxes how can I display my [name] state?
----> UPDATE - FULL CODE <----
I'm using a hover propriety to display my checkbox:
CSS using material ui:
hideCheckbox: {
display: 'none',
},
showCheckbox: {
display: 'initial',
},
My main class:
export class Item extends Component {
state = {
isHovering: true,
checkboxChecked: false,
}
handleGetCardSelected = (id, checked) => {
//Here I set isHovering to display my checkbox
//checkboxChecked is a control variable to always display the checkbox if it's checked
if(checked){
this.setState({
isHovering: !this.state.isHovering,
checkboxChecked: true,
})
} else {
this.setState({
checkboxChecked: false,
})
}
}
handleMouseHover = () => {
if(!this.state.checkboxChecked){
this.setState(this.toggleHoverState);
}
}
toggleHoverState = (state) => {
return {
isHovering: !state.isHovering,
};
}
return(
<div
onMouseEnter={this.handleMouseHover}
onMouseLeave={this.handleMouseHover}
>
<div className={`
${this.state.isHovering && classes.hideCheckbox }
${this.state.checkboxChecked && classes.showCheckbox}
`}>
<CheckBoxCard handleGetCardSelected={this.handleGetCardSelected}/>
</div>
</div>
<div
onMouseEnter={this.handleMouseHover}
onMouseLeave={this.handleMouseHover}
>
<div className={`
${this.state.isHovering && classes.hideCheckbox }
${this.state.checkboxChecked && classes.showCheckbox}
`}>
<CheckBoxCard handleGetCardSelected={this.handleGetCardSelected}/>
</div>
</div>
<div
onMouseEnter={this.handleMouseHover}
onMouseLeave={this.handleMouseHover}
>
<div className={`
${this.state.isHovering && classes.hideCheckbox }
${this.state.checkboxChecked && classes.showCheckbox}
`}>
<CheckBoxCard handleGetCardSelected={this.handleGetCardSelected}/>
</div>
</div>
)
}
My CheckboxCard:
import React from 'react';
import { makeStyles, withStyles } from '#material-ui/core/styles';
import { Checkbox } from '#material-ui/core';
const GreenCheckbox = withStyles({
root: {
color: '#43a04754',
'&$checked': {
color: '#43a047',
},
'&:hover': {
color: '#43a047',
backgroundColor: 'initial',
},
},
checked: {},
})(props => <Checkbox color="default" {...props} />);
export default function CheckBoxCard(props){
const [state, setState] = React.useState({
idItem: false,
});
const handleCheckbox = name => event => {
setState({ ...state, [name]: event.target.checked });
let id = name
let checked = event.target.checked
props.handleGetCardSelected(id, checked)
};
return(
<GreenCheckbox
checked={state.idItem}
onChange={handleCheckbox('idItem')}
value="idItem"
inputProps={{
'aria-label': 'primary checkbox',
}}
/>
);
}
By default, my checkbox is hidden because my state isHovering is true, so the css variable hideCheckbox ('display: none') is set.
If I hover the element, is called handleMouseHover and the checkbox is displayed!
If I checked my checkbox, is set checkboxChecked for true and now I'm always displaying my checkbox! But, if I've two or more elements, all checkbox is displayed, because checkboxChecked is an unique element!
So, my checkboxChecked must be dynamic and per item! In this way, if is checked, only this checkbox will be displayed. The others no!
For first element: ${this.state.checkboxCheckedITEM1 && classes.showCheckbox}
For second element: ${this.state.checkboxCheckedITEM2 && classes.showCheckbox}
For second element: ${this.state.checkboxCheckedITEM3 && classes.showCheckbox}
I update my code in sandbox: https://codesandbox.io/embed/material-demo-16t91?fontsize=14
How can I do that?
So, if I have 5, 10, 20 checkboxes how can I display my [name] state?
I think the smart way to do this is to nest components. Have an abstract parent component, that only renders the child component once the name is available. By using this pattern your problem can be solved.
Check out this helpful article
You can filter your object to get only checked names.
Object.keys(this.state).filter(name => this.state[name]);
If you have a finite list of checkbox component
render() {
return (
<div>
<Checkbox
handleChange={() => this.handleChange('abc', !this.state[abc])}
className={this.state['abc'] ? 'checked-class' : '' }
/>
</div>
)
}
In another situation whereby you render a list of dynamic checkbox.
componentDidMount() {
//Calling API to return dynamic list of checkboxes, and dump them into a state
this.setState({ listOfCheckboxes });
}
Then in your render method, you will be using .map function
render() {
return (
<div>
{
this.state.listOfCheckboxes.map(x => (
<Checkbox
handleChange={() => this.handleChange(x.name, !this.state[x.name]) }
className={this.state[x.name] ? 'checked-class' : '' }
/>))
}
</div>
)
}
By doing so :
this.state[name]
You can look at Object.keys(), but if in future you would need to handle more than one state, iteration does not seem to solve the problem.
You could also give it a prefix [name_${name}]: checked, but would not recommend that at all.
If it is not a problem, use an object and you will have full controll over it.
this.setState({
something: {
name,
checked
},
})
I have a function which triggers children checkboxes once main checkbox is checked, and all these checkboxes are mapped from JSON. The main checkboxes (Highest order) and all of its children checkboxes (2nd order) under them are shown on check and its working great, what i am trying to show is the children of those children of the main checkboxes (3rd order).
Basically to show all three orders under each other on check, and add the 3rd order to my current code, so Options Group shows Options, and under Options is what i want to show, which are Option 1, Option 2, option 3 and so on..
The checkbox values are passed as props from Checkbox.js to Itemlist.js where the fetch/map happens.
As I was trying to achieve this, I have been able to show each of these 3rd order checkboxes but each one alone instead of showing them as nested checkboxes. I've tried to include it in the existing mapping function to show them all as nested checkboxes as mentioned but it couldn't work it only works if it was mapped alone instead of the current mapped path which is const selectedItem. while the mapping path of the targeted checkboxes (3rd level) are added in Itemlist.js as const selectedMod,
Main Snippet : https://codesandbox.io/embed/6jykwp3x6n?fontsize=14
What I reached for so far to show the targeted checkboxes but individually: https://codesandbox.io/embed/o932z4yr6y?fontsize=14
Checkbox.js
import React from "react";
import "./Checkbox.css";
class Checkboxes extends React.Component {
constructor(props) {
super(props);
this.state = {
currentData: 0,
limit: 2,
checked: false
};
}
selectData(id, event) {
let isSelected = event.currentTarget.checked;
if (isSelected) {
if (this.state.currentData < this.props.max) {
this.setState({ currentData: this.state.currentData + 1 });
} else {
event.preventDefault();
event.currentTarget.checked = false;
}
} else {
if (this.state.currentData >= this.props.min) {
this.setState({ currentData: this.state.currentData - 1 });
} else {
event.preventDefault();
event.currentTarget.checked = true;
}
}
}
render() {
const input2Checkboxes =
this.props.options &&
this.props.options.map(item => {
return (
<div className="inputGroup2">
{" "}
<div className="inputGroup">
<input
id={this.props.childk + (item.name || item.description)}
name="checkbox"
type="checkbox"
onChange={this.selectData.bind(
this,
this.props.childk + (item.name || item.description)
)}
/>
<label
htmlFor={this.props.childk + (item.name || item.description)}
>
{item.name || item.description}{" "}
</label>
</div>
</div>
);
});
return (
<form className="form">
<div>
{/** <h2>{this.props.title}</h2>*/}
<div className="inputGroup">
<input
id={this.props.childk + this.props.name}
name="checkbox"
type="checkbox"
checked={this.state.checked}
onChange={this.selectData.bind(
this,
this.props.childk + this.props.uniq
)}
onChange={() => {
this.setState({
checked: !this.state.checked,
currentData: 0
});
}}
/>
<label htmlFor={this.props.childk + this.props.name}>
{this.props.name}{" "}
</label>
</div>{" "}
{this.state.checked ? input2Checkboxes : undefined}
</div>
</form>
);
}
}
export default Checkboxes;
Itemlist.js Where the mapping function happen
...
const selectedItem =
selectedChild.children && selectedChild.children.length
? selectedChild.children[this.state.itemSelected]
: null;
...
<div>
{selectedItem &&
selectedItem.children &&
selectedItem.children.map((item, index) => (
<Checkboxes
key={index}
name={item.name || item.description}
myKey={index}
options={item.children}
childk={item.id}
max={item.max}
min={item.min}
/>
))}
</div>
...
I have a simple react-component which contains of a form. In this form the user has an search-box where to find users.
In order to have a valid form, there must be at least 3 users but not more than 6.
Therefore I've added a hidden field (hidden by surrounding display:none; div) which contains the number of already added users.
This one will show the error-message in case the current number is invalid.
The following code is simplified but shows the main issue I have.
In my render-call I have:
render():JSX.Element {
return (
<form>
<ValidatableInput
input={<Input type="number" value={this.state.users.length.toString()} min={3} max={6} getRef={(el: HTMLInputElement) => this.testElement = el} onChange={() => alert("changed...")} />}
minValueMessage={"Currently there are " + this.state.users.length + " users. A minimum of 3 is needed"}
hidden={true} />
<UserSearch onUserSelected={this.handleUserSelected} />
// ...
</form>
);
}
whereas UserSearch is the component to search for users. This is mainly an autocomplete-input which triggers the handleUserSelected:
private handleUserSelected = (selectedElement: IUser) : void => {
// get a copy of the current state
const newState = { ...this.state };
// add the user
newState.users.push(selectedElement);
// thats what I've tried so far
this.testElement.dispatchEvent(new Event("change"));
this.testElement.dispatchEvent(new Event("change", {bubbles: true}));
this.testElement.onchange(new Event("change"));
this.testElement.onchange(new Event("change"), {bubbles: true});
this.setState(newState, () => // here I want to do the triggering as the input has now the new count as value set)
}
However, the console does not show changed at all.
How can I call/trigger the change-event manually when something other changed on the component?
This is the ValidatableInput-component:
export class ValidatableInput extends React.Component<IValidatableInputProps, IValidatableInputState> {
render(): JSX.Element {
const { labelText, input, requiredMessage, maxLengthMessage, minValueMessage, hidden } = this.props;
input.props.onInvalid = this.handleInvalid;
input.props.onChange = this.handleChange;
if (hidden) {
// set height to 0
}
return (
<FormGroup row >
<Label for={input.props.name} md={3}>{!hidden && labelText}</Label>
<Col md={9}>
<div>
{input}
{this.state.validityState.valueMissing && <div className={classNames("invalid-feedback")}>{requiredMessage || "This field is required"}</div>}
{this.state.validityState.tooLong && <div className={classNames("invalid-feedback")}>{maxLengthMessage || "The field shoud not be longer than " + input.props.maxLength}</div>}
{this.state.validityState.rangeOverflow && <div className={classNames("invalid-feedback")}>{maxLengthMessage || "There are too many items. Maximum allowed: " + input.props.max}</div>}
{this.state.validityState.rangeUnderflow && <div className={classNames("invalid-feedback")}>{minValueMessage || "There are too less items. Minimum needed: " + input.props.min}</div>}
</div>
</Col>
</FormGroup>
);
}
private handleInvalid = (ev: React.FormEvent<HTMLInputElement>): any => {
const input = ev.target as HTMLInputElement;
this.setState({ validityState: input.validity });
}
private handleChange = (ev: React.FormEvent<HTMLInputElement>): any => {
const input = ev.target as HTMLInputElement;
this.setState({ validityState: input.validity });
}
}
Maybe keep it simpler and remove the refs and eventHandling boilerplate.
Your business logic relies on this.state.users.length, right?
So use it on your favor:
handleUserSelected = (selectedElement: IUser) : void => {
this.setState({
users: [
...this.state.users,
selectedElement,
],
})
}
render() {
const { users } = this.state
const isInvalid = users.length < 3 || users.length > 6
return (
<form>
{isInvalid && <span>Your invalid message</span>}
<UserSearch ... />
</form>
)
}