Edited: How to use the switch using Bootstrap className?

Question

I can't seem to make the switch work using bootstrap 4.3. I think I am having a problem using bootstrap className, because if I do it without it things are different and works fine.

I have tried setting the label like we do in html, with ids and tagging it to the label, but it also doesn't seem to work.

class Privacidad extends Component {
    state = {
        isChecked: true
    }
    toggleChange = () => {
        this.setState({
            isChecked: !this.state.isChecked,
        });
    }

     <label>
       <input type="checkbox" className="custom-control-input"
                              checked={this.state.isChecked}
                              onChange={this.toggleChange}
                                />
         Si, deseo que otros usuarios me contacten
      </label>

    </div>

*Update: To make this work I had to use React-Bootstrap

Answer 1

does it working depend on the "custom-control-input" class? Because if so, it's likely not working because you used "class" attribute instead of "className" attribute. React requires you to use className since class is a reserved word.

Answer 2

React uses className instead of class to assign classes to tags.

<input type="checkbox" className="custom-control-input"
                       checked={this.state.isChecked}
                       onChange={this.toggleChange}
/>

Answer 3

When using input for checkbox you must use this,

<input type="checkbox" 
    className="custom-control-input"
    value={this.state.isChecked} //instead of checked attribute use value attribute
    onChange={this.toggleChange}
 />

Demo