CODEWITHSUNDEEP
javascriptreactjscomponents
325
325

Reputation: 606

React: Show different components based on conditions

I have a React app where users can search for files within a database. After clicking the search button on the form, a new window appears with the results; however, if there are no search results, I want a different component to appear indicating that there were no search results.

In the pane where the forms reside, this is what I have:

export default function PersistentDrawerLeft() {
  const classes = useStyles();
  const theme = useTheme();
  const [open, setOpen] = React.useState(false);
  const [showSearchForm, setShowSearchForm] = React.useState(true);
  const [showSubscribeForm, setShowSubscribeForm] = React.useState(true);
  const [showUploadForm, setShowUploadForm] = React.useState(true);
  const [showSearchResults, setShowSearchResults] = React.useState(false);
  const [searchResults, setSearchResults] = React.useState({});
  const [showBoundingBox, setShowBoundingBox] = React.useState(false);
  const [showNoResults, setShowNoResults] = React.useState(false);

  ...

    const getSearchStatus = (status) => {
    if (status === true) {
      setShowSearchForm(false);
      setShowSubscribeForm(true);
      setShowUploadForm(true);
      setShowSearchResults(true);
      setShowNoResults(true);
      setShowBoundingBox(true);
    }
  }

  const getSearchResults = (results) => {
    if(Object.keys(results).length > 0) {
      console.log("Ready to render search results!");
      console.log(results);
      setSearchResults(results);
    }
  }

  function identifySearchResults(results) {
    if(Object.keys(results).length > 0) {
      console.log("It is true!");
      return true;
    }
    else {
      console.log("It is false!");
      return false;
    }
  }

  const getReturnToSearchStatus = (status) => {
    if (status === true) {
      setShowSearchForm(true);
      setShowSubscribeForm(true);
      setShowUploadForm(true);
      setShowSearchResults(false);
      setShowNoResults(false);
      setShowBoundingBox(false);
    }
  }

  function SearchFormWrapper(props) {
    if (!props.show) {
      return null;
    }
  
    return (
      <SearchForm 
        searchInProgress={getSearchStatus}
        latestSearchResults={getSearchResults}
      ></SearchForm>
    );
  }

  function SearchResultsWrapper(props) {
    if (!props.show) {
      return null;
    }
  
    return (
        <ResultsContainer 
        returnToSearchStatus={getReturnToSearchStatus}
        resultsToRender={searchResults}
      ></ResultsContainer>
    );
  }

Later in the same file (within the return statement), I tried doing this conditional statement

<TabPanel value={value} index={0}>
              <SearchFormWrapper show={showSearchForm}></SearchFormWrapper>
              { identifySearchResults  ? <SearchResultsWrapper show={showSearchResults}></SearchResultsWrapper> : <NoSearchResultsWrapper show={showNoResults}></NoSearchResultsWrapper>}
</TabPanel>

but it is not conditionally showing the results.

Upvotes: 0

Views: 503

Answers (1)

rMonteiro
rMonteiro

Reputation: 1666

You need to pass the searchResults objects to the function identifySearchResults for it to return true or false.

It should work like this:

<TabPanel value={value} index={0}>
  <SearchFormWrapper show={showSearchForm} />
  {identifySearchResults(searchResults)  
    ? <SearchResultsWrapper show={showSearchResults} />
    : <NoSearchResultsWrapper show={showNoResults} />}
</TabPanel>

Upvotes: 1

Related Questions