Problem with algolia when i try to customize searchbox component

i add algolia to my gatsby project it work great but when i want to custom the search box i get a problem i need some help here please my friends this my first time work with this plugin thanks for the help

when i change the search box component from “react-instantsearch-dom” to the custom 1 its gave me this Error any help please

         import React from "react"
      import { graphql } from "gatsby"
      import { InstantSearch, Hits, SearchBox } from "react-instantsearch-dom"
      import algoliasearch from "algoliasearch/lite"

      import SEO from "../components/seo"
      import Article from "../components/article"
      import {Articles} from "../style/styles"
      import Layout from "../components/layout"

      const Blog = () => {
      const searchClient = algoliasearch(
      "J3Z3ETN290",
      "d68c781a1a913d680f27dac92553a1d6"
      )
      return (
      <Layout>
      <SEO title="blog Page" />
      <h1>Hello</h1>
      <InstantSearch indexName="hma" searchClient={searchClient} >
        <div className="right-panel">
          <SearchBox />
          <Articles>
              <Hits hitComponent={Article} />
          </Articles>
        </div>
      </InstantSearch>
      </Layout>
      )
      }
      export const query = graphql`
      query($skip: Int!, $limit: Int!) {
      blogs: allMdx(
      filter: { fileAbsolutePath: { regex: "//data/blogs//" } }
      sort: { order: ASC, fields: frontmatter___date }
      limit: $limit
      skip: $skip
      ) {
      edges {
        node {
          fields {
            slug
          }
          frontmatter {
            title
            tags
            keywords
            image
            description
            author
            category
          }
        }
      }
      }
      }
      `
      export default Blog

and this is the custom search box

 import { connectSearchBox } from 'react-instantsearch-dom';     
 const SearchBox = ({ currentRefinement, isSearchStalled, refine }) => (
 <form noValidate action="" role="search">

  <input
          type="search"
          value={currentRefinement}
          onChange={event => refine(event.currentTarget.value)}/>
        <button onClick={() => refine('')}>Reset query</button>
        {isSearchStalled ? 'My search is stalled' : ''}
      </form>
 );
const CustomSearchBox = connectSearchBox(SearchBox);
export default CustomSearchBox;`

I tried replicating your situation in a Gatsby sandbox, but it seemed to work as expected, could you edit this to a state more like yours? Here’s my try:

thank you so mush i fix the problem

2 Likes