TypeError: Cannot read properties of undefined (reading 'description')-CodePudding

I am trying to add a form in my todo app. In the field when I click for type something this shows an error. like this- TypeError: Cannot read properties of undefined (reading 'description')

I don't understand how to fix this. Please help.

Here is my TodoComponent File.

import React, { Component } from 'react';
import moment from 'moment';
import { Field, Form, Formik } from 'formik';

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

    this.state = {
      id: this.props.match.params.id,
      description: 'Learn Forms',
      targetDate: moment(new Date()).format('YYYY-MM-DD'),
    };
  }

  render() {
    return (
      <div>
        <h1>Todo</h1>
        <div className='container'>
          <Formik>
            {(props) => (
              <Form>
                <fieldset className='form-group'>
                  <label>Description</label>
                  <Field
                    className='form-control'
                    type='text'
                    name='description'
                  />
                </fieldset>
              </Form>
            )}
          </Formik>
        </div>
      </div>
    );
  }
}

export default TodoComponent;

CodePudding user response：

You are not providing initialValues to Formik. You should have something like -

<Formik initialValues={{ description: '' }} > ...