setState() in React not updating state onClick Switch (antd)

Question

When we click on the switch the state "valueState" does not update I don't know why ??

Also, I have a "statusValue" type problem because "switch antd" accepts boolean by cons initial value of props is of type number

Here is the code I am using :

//Code//

import React from 'react';
import { Form, Input, Switch } from "antd";
class UpdateCard extends React.Component {

constructor(props) {
    super(props);
    this.state = {
        valueState: this.props.state.status,
    }
}

handleToggle = (checked) => {
    console.log("state",this.state.valueState);
    console.log("checked",checked);
   if (checked === false){
    this.setState({
        valueState:1
      });
   }else {
    this.setState({
        valueState:0
      });
   }
    console.log("handleToggle valueState",this.state.valueState);
  };

  render() {
    const { state } = this.props;

    var statusValue = false;

    if (state.status === 0) { statusValue = true; }
  return (
  <Form id='update-state-form' 
            onFinish={this.onFinish}
            onFinishFailed={this.onFinishFailed}
            initialValues={{
                name: state ? state.name : '',
                status: state ? state.status : false,
                color: state ? state.color :'',
            }}
        >
            <FormItem {...formItemLayout} 
               name="name" 
               label={<IntlMessages id="app.stateName" />} 
               rules={[{ required: true, message: 'Please input the name !' }]} 
            >
                <Input />
            </FormItem>

            <FormItem {...formItemLayout} 
               name="color" 
               label={<IntlMessages id="app.color" />} 
               rules={[{ required: true, message: 'Please input the color !' }]}
            >
                <CirclePicker color={state.color} />
            </FormItem>

            <FormItem {...formItemLayout} 
               name="status" 
               label={<IntlMessages id="app.status" />} 
               rules={[{ required: true, message: 'Please input the status !' }]}
            >
                <Switch  defaultChecked={statusValue}  onClick={this.handleToggle}/>
            </FormItem>
        </Form>
    );
}
}
export default connect(
 null,
  {
     updateStateCardAction,
  }
 )(UpdateCard );

//****************************** Show console.log ******************************//

Answer 1

I feel you are missing on two main things here as long as I understood your problem :

1. statusValue has not been declared in the state. And it should be a boolean value in the state. From documentation of Ant-Design defaultChecked prop is set false. First make sure you declare statusValue as state variable:

   this.state = {
    valueState: this.props.state.status,
    statusValue:false
   }
   
   ... // and keep state in sync with the UI
   

2. Then you have to make sure to pass statusValue state in the onClick handler.

    <Switch  
         defaultChecked={this.state.statusValue}  
         onClick={()=>this.handleToggle(this.state.statusValue)}
     />