DEV Community

How to Add Infinite Scrolling to Your React App

John Au-Yeung on January 12, 2020

Subscribe to my email list now at http://jauyeung.net/subscribe/ Follow me on Twitter at https://twitter.com/AuMayeung Many more articles at http...

Read full post

Kishor Tripathy • Jan 16 '20

Hi John,
Thanks for this nice article.
I am novice to React.
Was trying to replicate the given code but getting an error in image & video search at line no 57.
Can you please help me to find out why it throws the error?

TypeError: Cannot read property 'query' of undefined
(anonymous function)
D:/Learn/React/react-examples/image-app/src/VideoSearchPage.js:57
54 | type="text"

55 | name="query"

56 | placeholder="Keyword"

57 | value={values.query || ''}

| ^ 58 | onChange={handleChange}

59 | isInvalid={touched.description && errors.query}

60 | />

John Au-Yeung • Jan 16 '20

Thanks very much for reading.

Did you have Formik and Yup installed?

Also, this part:

const schema = yup.object({  
  query: yup.string().required('Query is required'),  
});

is pretty important. You've to remember to pass that in.

PJ • Feb 21 '21

I'm getting the same error as Kishor but in ImageSearchPage.js

TypeError: Cannot read property 'query' of undefined

68 | type="text"
69 | name="query"
70 | placeholder="Keyword"

71 | value={values.query || ""}
| ^ 72 | onChange={handleChange}
73 | isInvalid={touched.description && errors.query}
74 | />

I do have
const schema = yup.object({
query: yup.string().required("Query is required"),
});

but still experiencing the problem. I don't think the problem is due to yup

John Au-Yeung • Feb 21 '21

Did you destructure values property from the parameter?