Develop with FastTrack

To display content from search results documents in the ResultsCustom widget, that content must be extracted and included in the search results. Add an extract-document-data property in the query options of the application to do this. See Include document extracts in search results for details.

The ResultsCustom widget expects to receive search results in the results prop. The expected format is the format returned from POST /v1/search in the MarkLogic REST API.

In this example, the ResultsCustom widget displays a custom rendering for each search result. The rendering is constructed by the renderItem callback.

In this example, the ResultsCustom widget is passed a renderItem prop that constructs a custom rendering for each search result. The myResultRender function builds the custom rendering using the URI, first name, last name, job title, and date of birth from each search result:

import { useContext } from "react";
import './App.css';
import { MarkLogicContext, SearchBox, ResultsList, ResultsSnippet } from "ml-fasttrack";
  
function App() {
  
  const context = useContext(MarkLogicContext);
  
  const handleSearch = (params) => {
    context.setQtext(params?.q);
  }
 
  const myResultRender = (result, index, handleClick) => {
    const extracted = result?.dataItem?.extracted.content[0].envelope;
    let fullName = extracted.firstName + ' ' + extracted.lastName;
    return (
      <div
        key={index}
        onClick={handleClick}
        style={{padding: '10px 0', cursor: 'pointer'}}
      >
          <div>{result?.dataItem?.uri}</div>
          <div><strong>{fullName}</strong> is a <strong>{extracted.title}</strong> and has a date of birth of <strong>{extracted.dob}.</strong></div>
      </div>
    )
  }
  
  return (
    <div className="App">
      <div className="SearchBox">
        <SearchBox onSearch={handleSearch}/>
      </div>
      <ResultsList
        results={context.searchResponse.results}
        paginationFooter={true}
        renderItem={(result, index) => myResultRender(result, index, () => console.log(result))}
      />
    </div>
  );
}
  
export default App;