Ok, intentaré hacerlo rápido porque DEBERÍA ser una solución fácil ...

He leído un montón de preguntas similares, y la respuesta parece ser bastante obvia. ¡Nada que tendría que buscar en primer lugar! Pero ... estoy teniendo un error que no puedo entender cómo solucionarlo o por qué está sucediendo.

Como sigue:

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}/>
    )
}

Más código rodea esto, pero aquí es donde radica mi problema. Debería funcionar, ¿verdad?

También he intentado esto:

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

Entonces tengo esos dosconsole.log()'s, ambos deberían ser lo mismo. Literalmente estoy configurando el estado para que sea el mismo que elevent.target.checked en la línea de arriba!

Pero siempre devuelve lo contrario de lo que debería.

Lo mismo ocurre cuando uso!this.state.barClubLounge; ¡Si comienza falso, en mi primer clic sigue siendo falso, incluso si la casilla de verificación está marcada o no se basa en el estado!

Es una paradoja loca y no tengo idea de lo que está pasando, ¡por favor ayuda!