I am working on an app that allows for doctors to fill out intake forms during surgeries or other procedures. On another page of the app, the doctor's are able to select favorite codes from the whole code list. A component of the intake form is an input field that searches a dataset for the doctor's favorite CPT and ICD-10 Codes. The issue is that the doctors do not want to go into the favorite code component to set a favorite while they are filling out the intake form. I created another input component that searches the favorite code list the global code list. My goal is to create a ternary that shows the favorite code component, but when enter is pressed (assuming the code they are looking for is not in the favorites list) it will hide and the component that shows the favorites the global list will be visible.

I am new to React so apologizes for the long winded question. Please let me know if you need to see any other code.

{show === true ?
            <SearchableDropdown
              label="ICD-10 Code"
              showAddButton={false}
              showCaretIcon={true}
              options={fdata?.icdCodes?.map((code) => ({
                content: `${code.code}`   ' - '   `${code.description}`,
                key: code.id,
                value: code.id,
              }))}
              displayValue={state.icdCodes}
              value={searchIcd}
              onChange={(newValue) => {
                setState({
                  ...state,
                  icdCodes: newValue
                });
              }}
              onKeyUp = {() => setShow(false)}
              onSelectOption={(option) => {
                setState({
                  ...state,
                  icdCodes: option?.content,
                });
              }}
            />
            : 
            <Search
             label='ICD-10 Code'
             placeholderText={valid ? (
               "Search for an ICD-10 code"
               ) : (
                 searchText
               )}
             searchText={searchIcd}
             setSearchText={setSearchIcd}
             searchFunction={icdAction}
            />
      

Favorite List

Global List

EDIT: I get an error that states, "(e: any, show: any) => void' is not assignable to type '(newDisplayValue: string) => any'"

  const handleKeyUp = (e, show) => {
      if(e.key !== "Enter"){
      show = false
    
    }};


 {show ?
            <SearchableDropdown
              label="ICD-10 Code"
              showAddButton={false}
              showCaretIcon={true}
              options={fdata?.icdCodes?.map((code) => ({
                content: `${code.code}`   ' - '   `${code.description}`,
                key: code.id,
                value: code.id,
              }))}
              displayValue={state.icdCodes}
              value={searchIcd}
              onChange={(newValue) => {
                setState({
                  ...state,
                  icdCodes: newValue
                });
              }}
              onKeyDown={handleKeyUp}
              onSelectOption={(option) => {
                setState({
                  ...state,
                  icdCodes: option?.content,
                });
              }}
            />
            : 
            <Search
             label='ICD-10 Code'
             placeholderText={valid ? (
               "Search for an ICD-10 code"
               ) : (
                 searchText
               )}
             searchText={searchIcd}
             setSearchText={setSearchIcd}
             searchFunction={icdAction}
            />
          }

CodePudding user response：

To modify your state when the user press enter in your input, you can do:

  const handleKeyUp = (e) => {
    if(e.key !== "Enter") return;
    //do your logic here
  };
  //...
  <input ... onKeyUp={handleKeyUp} />

CodePudding user response：

Your show variable should be a state for conditional rendering (consider more descriptive name):

const [showFavorites, setShowFavorites] = useState(true);

then your keyboard handler should look like this:

  const handleKeyUp = (e) => {
      if(e.key !== "Enter"){
      setShowFavorites(false);
    
    }};