Skip to main content

Develop with FastTrack

Search MarkLogic using MarkLogicContext

When a search is submitted, this code uses the onSearch event handler from SearchBox to set the search text in MarkLogicContext. MarkLogicContext recognizes a change in state, executes a search, and stores the result in the state variable searchResponse. The results are displayed with ResultsSnippet. Replace the code in the App.jsx file with this:

import React from 'react'
import './App.css'
import { useContext } from "react";
import { MarkLogicContext, SearchBox, ResultsSnippet } from "ml-fasttrack"

function App() {
  const context = useContext(MarkLogicContext);
  return (
    <div>
      <SearchBox
        onSearch={(params) => context.setQtext(params.q)}
      />
      <ResultsSnippet
        results={context.searchResponse.results}
      />
    </div>
  )
}

export default App