0

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;
2
  • please post error messages as text, not screenshots. Anyway, your screenshot is pointing to something quite separate from the component code you show here - a setIn function in a "utils" file. The issue will either be there or in the inputs you're passing to it. Commented Dec 23, 2021 at 13:02
  • Ok, I understood.. but I have not created any utils file. I didn't understand your solution. Commented Dec 23, 2021 at 13:15

1 Answer 1

1

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

<Formik initialValues={{ description: '' }} > ...
Sign up to request clarification or add additional context in comments.

1 Comment

as below, do not mix the use of state and formik. Let Formik handle your form state for you.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.