Ok, vou tentar fazer isso rápido, porque DEVE ser uma solução fácil ...

Eu já li várias perguntas semelhantes, e a resposta parece ser bastante óbvia. Nada que eu tivesse que procurar em primeiro lugar! Mas ... Estou tendo um erro que não consigo entender como consertar ou por que está acontecendo.

Do seguinte modo:

class NightlifeTypes extends Component {
constructor(props) {
    super(props);

    this.state = {
        barClubLounge: false,
        seeTheTown: true,
        eventsEntertainment: true,
        familyFriendlyOnly: false
    }
    this.handleOnChange = this.handleOnChange.bind(this);
}

handleOnChange = (event) => {   
    if(event.target.className == "barClubLounge") {
        this.setState({barClubLounge: event.target.checked});
        console.log(event.target.checked)
        console.log(this.state.barClubLounge)
    }
}

render() {
    return (
        <input className="barClubLounge" type='checkbox' onChange={this.handleOnChange} checked={this.state.barClubLounge}/>
    )
}

Mais código envolve isso, mas é aqui que reside o meu problema. Deveria funcionar, certo?

Eu também tentei isso:

handleOnChange = (event) => {   
if(event.target.className == "barClubLounge") {
    this.setState({barClubLounge: !this.state.barClubLounge});
    console.log(event.target.checked)
    console.log(this.state.barClubLounge)
}

Então eu tenho esses doisconsole.log()Os dois devem ser iguais. Estou literalmente definindo o estado para ser o mesmo que oevent.target.checked na linha acima!

Mas sempre retorna o oposto do que deveria.

O mesmo vale para quando eu uso!this.state.barClubLounge; Se começar falso, no meu primeiro clique, ele permanecerá falso, mesmo que a caixa de seleção esteja marcada ou não seja baseada no estado !!

É um paradoxo louco e eu não tenho ideia do que está acontecendo, por favor me ajude!