I tried using the demo code from here in my application, but it's not functioning as expected. I'm unsure of the differences between my code and the example on the website. The errors I'm encountering are:
react-dom.development.js:14724 Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
VM15341 makeStyles.js:170 Uncaught TypeError: Cannot read property 'refs' of undefined
react-dom.development.js:22940 Uncaught TypeError: Cannot read property 'componentDidCatch' of null
Code:
import React, { Component } from "react";
import Autocomplete from "@material-ui/lab/Autocomplete";
import TextField from "@material-ui/core/TextField";
const top100Films = [
{ title: "The Shawshank Redemption", year: 1994 },
{ title: "The Godfather", year: 1972 },
{ title: "The Godfather: Part II", year: 1974 },
];
class CollectionPage extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<Autocomplete
id="combo-box-demo"
options={top100Films}
getOptionLabel={(option) => option.title}
style={{ width: 300 }}
renderInput={(params) => <TextField {...params} />}
/>
</div>
);
}
}
export default CollectionPage;