DEV Community

Discussion on: How to add search to your Gatsby site

View post

Replies for: I'm trying your solution, but I keep having an error about the usage of useState. My index page derives from a component: import React, { useSt...

 
emma profile image
Emma Goto 🍙 •

Yes, so you can write a React component in one of two ways: as a functional component (the "newer" way), and as a class component.

You could convert your class component to a functional component:

const IndexPage = (pageProps) => {
    const { search } = window.location;
    const query = new URLSearchParams(search).get('s'); 
    const [searchQuery, setSearchQuery] = useState(query || '');
}

export default IndexPage;
Enter fullscreen mode Exit fullscreen mode

And that would let you use the useState hook. You can still use class components, but I think it makes things a little bit more complicated :)