Trying to create a controlled switcher button - reactjs

Question

I've picked up this code online (it's high up in the google results) :
https://codepen.io/BuiltByEdgar/pen/jWOVYQ
but I've grown annoyed with it's code.
I'm trying to have a duo of these buttons where default state is on and having both off is not allowed. The UI behavior I've chosen for that is to simply re-enable the other if it's sibling is being turned off :
onONEClick() {
let {
TWO,
ONE,
} = this.state;
if (TWO) {
ONE = !ONE;
} else if (ONE) {
TWO = !TWO;
ONE = !TWO;
} else {
ONE = !ONE;
}
this.setState({
ONE,
TWO,
});
this.props.callBack({
ONE,
TWO,
});
}
onTWOClick() {
let {
TWO,
ONE,
} = this.state;
if (ONE) {
TWO = !TWO;
} else if (TWO) {
TWO = !TWO;
ONE = !ONE;
} else {
TWO = !TWO;
}
this.setState({
ONE,
TWO,
});
this.props.callBack({
ONE,
TWO,
});
}
and the render:
<div>
<div className="switch-container">
<label>
<input
onChange={this.onONEClick}
type="checkbox"
className="switch"
value={this.state.ONE}
checked={this.state.ONE}
/>
<div>
<span><g className="icon icon-toolbar grid-view" /></span>
<span><g className="icon icon-toolbar ticket-view" /></span>
<div />
</div>
</label>
</div>
ONE
</div>
<div>
<div className="switch-container">
<label>
<input
onChange={this.onTWOClick}
type="checkbox"
className="switch"
value={this.state.TWO}
checked={this.state.TWO}
/>
<div>
<span><g className="icon icon-toolbar grid-view" /></span>
<span><g className="icon icon-toolbar ticket-view" /></span>
<div />
</div>
</label>
</div>
TWO
</div>
simple enough right?
problem is react hates that my switcher is an input of type "checkbox" :
and as you can see I've done my best to avoid this happening but I think it simply isn't in the cards to have an input type and change it's checked state other than by a human.
So I'm thinking maybe I can solve the issue by reconstructing the checkbox with just divs. (the label tag is also in violation of ESLint)
ANSWERED BY JLAITIO :
and here's what I added (top part of the file with props declaration and constructor) :
const propTypes = {
value: React.PropTypes.object,
type: React.PropTypes.string,
callBack: React.PropTypes.func,
ONE: React.PropTypes.bool,
TWO: React.PropTypes.bool,
};
const defaultProps = {
callBack: () => {},
onChange: () => {
},
value: { type: '' },
ONE: true,
TWO: true,
};
class ProviderInfosComponent extends Component {
constructor(props) {
super(props);
const initialValue = props.value;
this.state = {
...initialValue,
ONE: this.props.ONE,
TWO: this.props.TWO,
};
this.onONEClick = this.onONEClick.bind(this);
this.onTWOClick = this.onTWOClick.bind(this);
}

Answer 1

You get this error, if at any point your value attribute is not set, or set to a value that is undefined, and then subsequently it is an existing React state value.
My best guess would be that your constructor does not initialize ONE and TWO, hence the value being undefined to start with. Then when you actually have a value, the component transfers from being an uncontrolled (="component state independent of React") to controlled(="component state tied directly to React state").

Answer 2

As an addition to #jlaitio's answer,
You don't have to set a value for a checkbox input. You can just use checked prop of the component. Also a small improvement for your changed functions might be useful to follow up the values easier.
constructor(props) {
super(props);
this.state = {
ONE: true,
TWO: true
};
}
onONEChange = (event) => {
this.setState((prevState) => {
ONE: event.target.checked,
TWO: (event.target.checked === false ? true : prevState.TWO) // change state of TWO if ONE is false else just leave it as is
}, () => {
this.props.callBack({ ONE: this.state.ONE, TWO: this.state.TWO });
});
}
onTWOChange = (event) => {
this.setState((prevState) => {
ONE: (event.target.checked === false ? true : prevState.ONE), // change state of ONE if TWO is false else just leave it as is
TWO: event.target.checked
}, () => {
this.props.callBack({ ONE: this.state.ONE, TWO: this.state.TWO });
});
}