how to setstate in handleclick in reactjs

Question

im a beginner concerning react.i do not know why setState in the handleclick function doesn't work properly. this is the code

class Toggle extends React.Component {
    constructor(props) {
        super(props);
        this.state = { isDark: false }
    }
    handleOnClick = () => {
        this.setState(prevState => ({ isDark: !prevState.isDark }))
        if (this.state.isDark === 'true') {
            setTheme('theme-dark')
        }
        else setTheme('theme-light')
    }
render() {

        return (
            <button onClick={this.handleOnClick}>
          </button>

so when i click the button the state of isDark will always be false, that means setState is not working i guess

Answer 1

the problem is that the react lifecycle will update the state after the sync function handleOnClick complete. You may try this way:

handleOnClick = () => {
  this.setState(prevState => {
    const isDark = !prevState.isDark;
    if (isDark === true) {
      setTheme('theme-dark');
    } else setTheme('theme-light');
    return {...prevState, isDark};
  })
};

or using lifecycle method https://reactjs.org/docs/react-component.html#componentdidupdate

componentDidUpdate(){
 if (this.state.isDark === true) {
   setTheme('theme-dark');
 } else setTheme('theme-light');
}

Answer 2

You need to write this

this.handleOnClick = this.handleOnClick.bind(this);

at the end of your constructor and in handleOnClick function create local variable to save new value:

handleOnClick = () => {
    const isDark = !this.state.isDark;

    this.setState({ isDark: isDark });

    if (isDark === true) {
        setTheme('theme-dark')
    } else {
        setTheme('theme-light');
    }
}

Answer 3

the code is correct but in the conditional statement there is a huge mistake i was comparing this.state.isDark ==='true'