Why doesn't formik properly work in my React app?

Question

I am new to React and web development and have a question about Formik. My webpage loads correctly when I comment this part out (the values):

 <Form noValidate onSubmit={handleSubmit}>
            <Form.Row>
              <Form.Group as={Col} md="12" controlId="name">
                <Form.Label>Term</Form.Label>
                <Form.Control
                  type="text"
                  name="term"
                  placeholder="Term"
                  //value={values.term || ""}
                  onChange={handleChange}
                  isInvalid={touched.term && errors.term}
                />
                <Form.Control.Feedback type="invalid">
                  {errors.term}
                </Form.Control.Feedback>
              </Form.Group>
              <Form.Group as={Col} md="12" controlId="url">
                <Form.Label>Location</Form.Label>
                <Form.Control
                  type="text"
                  name="location"
                  placeholder="Location"
                  //value={values.location || ""}
                  onChange={handleChange}
                  isInvalid={touched.location && errors.location}
                />

However, if I enter anything into the fields, it crashes and gives me an error about Formik. If I include value, it doesn't load the page and gives me an error: 'TypeError: Cannot read property 'term' of undefined.' I am not sure what I'm doing wrong. Thanks in advance!

Edit: Here is my complete code for this file.

  return (
    <div className="home-page">
      <h1 className="center">Business Search</h1>
      <Formik validationSchema={schema} onSubmit={handleSubmit}>
        {({
          handleSubmit,
          handleChange,
          handleBlur,
          values,
          touched,
          isInvalid,
          errors,
        }) => (
          <Form noValidate onSubmit={handleSubmit}>
            <Form.Row>
              <Form.Group as={Col} md="12" controlId="name">
                <Form.Label>Term</Form.Label>
                <Form.Control
                  type="text"
                  name="term"
                  placeholder="Term"
                  value={values.term || ""}
                  onChange={handleChange}
                  isInvalid={touched.term && errors.term}
                />
                <Form.Control.Feedback type="invalid">
                  {errors.term}
                </Form.Control.Feedback>
              </Form.Group>
              <Form.Group as={Col} md="12" controlId="url">
                <Form.Label>Location</Form.Label>
                <Form.Control
                  type="text"
                  name="location"
                  placeholder="Location"
                  value={values.location || ""}
                  onChange={handleChange}
                  isInvalid={touched.location && errors.location}
                />
                <Form.Control.Feedback type="invalid">
                  {errors.location}
                </Form.Control.Feedback>
              </Form.Group>
            </Form.Row>
            <Button type="submit">Search</Button>
          </Form>
        )}
      </Formik>
      <br />
      {results.map((r, i) => {
        return (
          <Card key={i}>
            <Card.Title className="card-title">{r.name}</Card.Title>
            <Card.Body>
              <p>
                Address: {r.location.address1}, {r.location.city},{" "}
                {r.location.country}, {r.location.state}
              </p>
              <p>Rating: {r.rating}</p>
              <p>Open Now: {r.hours[0].is_open_now ? "Yes" : "No"}</p>
              <p>Hours:</p>
              <ul>
                {r.hours[0] &&
                  r.hours[0].open.map((h, i) => (
                    <li key={i}>
                      {days[h.day]}: {h.start} - {h.end}
                    </li>
                  ))}
              </ul>
            </Card.Body>
          </Card>
        );
      })}
      <br />
      <Pagination>
        <Pagination.First onClick={changePage.bind(this, 1)} />
        <Pagination.Prev
          onClick={changePage.bind(this, page - 1)}
          disabled={page === 0}
        />
        <Pagination.Next
          onClick={changePage.bind(this, page + 1)}
          disabled={Math.ceil(total / 20) === page}
        />
        <Pagination.Last
          onClick={changePage.bind(this, Math.max(Math.floor(total / 20)), 0)}
        />
      </Pagination>
    </div>
  );
}
export default HomePage;

I don't think I am passing ```errors``` down anywhere else except after location again. {errors.location} — Shambhavi Ramaswamy, Jun 11 '20 at 15:46
It isn't allowing me to add the code in comments since it is too long. I'll add it to my question body. — Shambhavi Ramaswamy, Jun 11 '20 at 15:50
yes please edit question and don't add too much code, just the relevant parts — Red Baron, Jun 11 '20 at 15:51
can you `console.log(errors, values, touched)` . you said `term` is of undefined and they are the only thing `.term` comes after — Red Baron, Jun 11 '20 at 16:11
When I try doing so, it tells me errors, values, and touched is not defined. — Shambhavi Ramaswamy, Jun 11 '20 at 16:15
ok at least we solved that error :D now can you try and debug why they aren't defined? looks like something isn't setup quite right I guess? — Red Baron, Jun 11 '20 at 16:16
no worries. feel free to post another question if you're still stuck, happy to try help again :) — Red Baron, Jun 11 '20 at 16:19

Why doesn't formik properly work in my React app?

0 Answers0