'Unable to setup NIH's Medical Condition API (with Auto-completion) in React App

I am building a react app right now and one of the features allows users to look up medical conditions. I'm trying to use the NIH's open-source API with their auto-completion module.

Their documentation is here: https://clinicaltables.nlm.nih.gov/apidoc/conditions/v3/doc.html

I opted to use their npm package for autocompletion (as opposed to the CDN), which can be found here: https://www.npmjs.com/package/autocomplete-lhc

I pasted the source (https://jsfiddle.net/api/post/library/pure/) into my component. However, the search feature doesn't work, and the only thing that shows up on my browser is:

"See more items (Ctl Ret)
Search Results
Search Hint"

This is my component code:

import React from 'react';
import Def from 'autocomplete-lhc';

function SearchDiseases() {

  new Def.Autocompleter.Search('condition',
    'https://clinicaltables.nlm.nih.gov/api/conditions/v3/search');
                

  return (
    <div className="div-container">
        <h1>Search Medical Conditions</h1>
        <input type="text" id="condition" placeholder="Condition"/>
    </div>
  )
}

export default SearchDiseases;

And these are the errors I'm getting in the google chrome console:

autocomplete-lhc.min.js:1 Uncaught TypeError: Cannot read properties of null (reading 'appendChild')
    at new t.ScreenReaderLog (autocomplete-lhc.min.js:1:17049)
    at t.exports (autocomplete-lhc.min.js:1:28869)
    at Object.<anonymous> (autocomplete-lhc.min.js:1:1183)
    at i (autocomplete-lhc.min.js:1:110)
    at autocomplete-lhc.min.js:1:902
    at autocomplete-lhc.min.js:1:911
t.ScreenReaderLog @ autocomplete-lhc.min.js:1
t.exports @ autocomplete-lhc.min.js:1
(anonymous) @ autocomplete-lhc.min.js:1
i @ autocomplete-lhc.min.js:1
(anonymous) @ autocomplete-lhc.min.js:1
(anonymous) @ autocomplete-lhc.min.js:1
autoCompBase.js:671 Uncaught Error: Could not find the field with id 'condition"
    at klass.defAutocompleterBaseInit (autoCompBase.js:671:1)
    at klass.initialize (autoCompSearch.js:280:1)
    at new klass (prototype_api.js:130:1)
    at SearchDiseases (SearchDiseases.js:6:1)
    at renderWithHooks (react-dom.development.js:16175:1)
    at mountIndeterminateComponent (react-dom.development.js:20913:1)
    at beginWork (react-dom.development.js:22416:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4161:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4210:1)
    at invokeGuardedCallback (react-dom.development.js:4274:1)
defAutocompleterBaseInit @ autoCompBase.js:671
initialize @ autoCompSearch.js:280
klass @ prototype_api.js:130
SearchDiseases @ SearchDiseases.js:6
renderWithHooks @ react-dom.development.js:16175
mountIndeterminateComponent @ react-dom.development.js:20913
beginWork @ react-dom.development.js:22416
callCallback @ react-dom.development.js:4161
invokeGuardedCallbackDev @ react-dom.development.js:4210
invokeGuardedCallback @ react-dom.development.js:4274
beginWork$1 @ react-dom.development.js:27405
performUnitOfWork @ react-dom.development.js:26513
workLoopSync @ react-dom.development.js:26422
renderRootSync @ react-dom.development.js:26390
performConcurrentWorkOnRoot @ react-dom.development.js:25694
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
autoCompBase.js:671 Uncaught Error: Could not find the field with id 'condition"
    at klass.defAutocompleterBaseInit (autoCompBase.js:671:1)
    at klass.initialize (autoCompSearch.js:280:1)
    at new klass (prototype_api.js:130:1)
    at SearchDiseases (SearchDiseases.js:6:1)
    at renderWithHooks (react-dom.development.js:16175:1)
    at mountIndeterminateComponent (react-dom.development.js:20913:1)
    at beginWork (react-dom.development.js:22416:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4161:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4210:1)
    at invokeGuardedCallback (react-dom.development.js:4274:1)
defAutocompleterBaseInit @ autoCompBase.js:671
initialize @ autoCompSearch.js:280
klass @ prototype_api.js:130
SearchDiseases @ SearchDiseases.js:6
renderWithHooks @ react-dom.development.js:16175
mountIndeterminateComponent @ react-dom.development.js:20913
beginWork @ react-dom.development.js:22416
callCallback @ react-dom.development.js:4161
invokeGuardedCallbackDev @ react-dom.development.js:4210
invokeGuardedCallback @ react-dom.development.js:4274
beginWork$1 @ react-dom.development.js:27405
performUnitOfWork @ react-dom.development.js:26513
workLoopSync @ react-dom.development.js:26422
renderRootSync @ react-dom.development.js:26390
recoverFromConcurrentError @ react-dom.development.js:25806
performConcurrentWorkOnRoot @ react-dom.development.js:25706
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
react-dom.development.js:18572 The above error occurred in the <SearchDiseases> component:

    at SearchDiseases (http://localhost:3000/static/js/bundle.js:2040:3)
    at Routes (http://localhost:3000/static/js/bundle.js:58046:5)
    at div
    at Main (http://localhost:3000/static/js/bundle.js:863:5)
    at App (http://localhost:3000/static/js/bundle.js:37:86)
    at Router (http://localhost:3000/static/js/bundle.js:57979:15)
    at BrowserRouter (http://localhost:3000/static/js/bundle.js:56788:5)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
logCapturedError @ react-dom.development.js:18572
update.callback @ react-dom.development.js:18605
callCallback @ react-dom.development.js:13122
commitUpdateQueue @ react-dom.development.js:13143
commitLayoutEffectOnFiber @ react-dom.development.js:23290
commitLayoutMountEffects_complete @ react-dom.development.js:24578
commitLayoutEffects_begin @ react-dom.development.js:24564
commitLayoutEffects @ react-dom.development.js:24502
commitRootImpl @ react-dom.development.js:26779
commitRoot @ react-dom.development.js:26638
finishConcurrentRender @ react-dom.development.js:25848
performConcurrentWorkOnRoot @ react-dom.development.js:25765
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
autoCompBase.js:671 Uncaught Error: Could not find the field with id 'condition"
    at klass.defAutocompleterBaseInit (autoCompBase.js:671:1)
    at klass.initialize (autoCompSearch.js:280:1)
    at new klass (prototype_api.js:130:1)
    at SearchDiseases (SearchDiseases.js:6:1)
    at renderWithHooks (react-dom.development.js:16175:1)
    at mountIndeterminateComponent (react-dom.development.js:20913:1)
    at beginWork (react-dom.development.js:22416:1)
    at beginWork$1 (react-dom.development.js:27381:1)
    at performUnitOfWork (react-dom.development.js:26513:1)
    at workLoopSync (react-dom.development.js:26422:1)

I'm unsure of why the field with id "condition" can not be found.

I've added screenshots of what I see in my browser/errors, and also another screenshot of what I'm trying to achieve.

All the help would be greatly appreciated. Thank you!!

javascript reactjs

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'Unable to setup NIH's Medical Condition API (with Auto-completion) in React App

Sources

Related Questions