React, Next.js and Type Script Unhandled Runtime Error TypeError: Cannot read properties of undefined (reading 'value')

Question

I am developing a multi-page form using antd package to add some style

In the main page of the form, I wrote the following code (I imported everything that I need before!).

export class CreateNewContract extends Component {
  constructor(props) {
    super(props);
    this.state = {
      step: 1,
      someData: '',
    };
  }

  nextStep = () => {
    const { step } = this.state;
    this.setState({
      step: step + 1,
    });
  };

  prevStep = () => {
    const { step } = this.state;
    this.setState({
      step: step - 1,
    });
  };

  handleChange = input => e => {
    this.setState({ [input]: e.target.value });
  };

  render() {
    const { step } = this.state;
    const {
      someData,
    } = this.state;

    const values = {
      someData,
    };

    switch (step) {
      case 1:
        return (
          <TypeContract
            nextStep={this.nextStep}
            handleChange={this.handleChange}
            values={values}
          />
        );
      case 2:
        return (
          <Pricing
            nextStep={this.nextStep}
            handleChange={this.handleChange}
            values={values}
          />
        );
      default:
        return <div>Error!</div>;
    }
  }
}

export default CreateNewContract;

The first step componend code is implemented using the switch toggles available on antd package. It looks like this:

export class TypeContract extends Component {
    continue = e => {
        e.preventDefault();
        this.props.nextStep();
    }

  render() {
      const { values, handleChange } = this.props;
    return (
        <div>
            <h2>Choose the type...</h2>
     <Form
      name="basic"
      labelCol={{
        span: 8,
      }}
      wrapperCol={{
        span: 16,
      }}
    >
    <Form.Item label="option1">  
    <span>OPTION 1</span>         
         <Form.Item name="option1"> 
         <Switch
      checkedChildren={<CheckOutlined />}
      unCheckedChildren={<CloseOutlined />}
      defaultChecked
      onChange={handleChange('option1')}
    /></Form.Item> 
    </Form.Item>

    <Form.Item label="option2">  
    <span>OPTION 2</span>         
         <Form.Item name="option2"> 
         <Switch
      checkedChildren={<CheckOutlined />}
      unCheckedChildren={<CloseOutlined />}
      defaultChecked
      onChange={handleChange('option2')}
    /></Form.Item> 
    </Form.Item>

    <Form.Item label="save">         
         <Form.Item name="save"> 
         <Button 
         type="primary"
         onClick={this.continue}
         >Save and Continue</Button>
         </Form.Item> 
    </Form.Item>

    </Form>
</div>
    )
  }
}

export default TypeContract

In the First Step of the form, I have a SAVE AND CONTINUE button, which causes the problem when it is clicked.

Error message

I tried adding ""strictNullChecks": true" to my tsconfig.json file and it solved one of the previous problems, but not this one.

Can anyone help me with this issue? Thanks

Answer 1

Solved. The issue was with typescript. I deleted node.modules and package-lock.json, npm update, npm install and finally npm i typescript again.