How can I conditionally render search results with ReactiveBase

Question

I'm trying to conditionally render my Results component from within ReactiveBase, but every time I try to use a ternary operator it breaks the rendering. If I remove the ternary, results display.

I'm using the <ReactiveList> component to display the results in my Results component.

I only want results to display if a user has ACTUALLY submitted a search query. So how can I conditionally render the Results component from within ONLY after a user has submitted a query

Here is my code so far:

import React, { Component } from 'react';
import { Redirect, withRouter } from 'react-router-dom';
import { ReactiveBase, DataSearch } from '@appbaseio/reactivesearch';

import Results from '../../components/appbaseio-search/Results';

class SearchContainer extends Component {
  constructor(props) {
    super(props);
    this.state = {
      redirect: false,
      loading: false,
    };
  }

  render() {
    const { pathname } = this.props;
    const { value, loading } = this.state;

    const { redirect } = this.state;
    if (redirect ) {
      return (
        <Redirect
          to={{
            pathname: '/search',
            search: `?q="${value}"`,
          }}
        />
      );
    }

    return (
      <ReactiveBase
        ...>
          <DataSearch
            ...
            />
          { pathname === '/results'
            ? <Results />
          : null
          }
        </ReactiveBase>
    );
  }
}

export default withRouter(SearchContainer);

score 1 · Answer 1 · edited Dec 23 '18 at 21:54

All it came down to was putting another piece of state, and updating that with componentDidMount

this.state = {
   ...
   loading: true,
 };


componentDidMount() {
 const { location } = this.props;
 this.setState({ loading: false });
}

and then after render()

const { loading } = this.state;

and then the conditional

{ loading === false && location.pathname === '/results'
   ? <Route path="/results" component={Results} />
   : null }

You can also just render the component <Results /> instead of using RR4-<Route /> - I tried both - they both work just fine.

score 0 · Answer 2 · answered Dec 19 '18 at 18:55

0

Have you considered using React-Router? Or you can use state without relying on paths.

For instance:

render() {
  const { results } = this.state;
  if (results || results.length === 0) {
    return (<ReactiveBase>...</ReactiveBase>);
  } else {
    return (<ReactiveBase><Results /></ReactiveBase>);
  }
}

answered Dec 19 '18 at 18:55

I'm already using React-Route in the app and its working fine. I wanted to keep it simple and just use the ternary operator but I'm going to try your example and see if it works – user3125823 Dec 19 '18 at 18:59
@user3125823 the ternary operator isn't always the best way; you may even want to consider letting the `Results` component having a property passed into it and rendering a `React.Fragment` and handling the logic in that component instead of in the SearchContainer. – Dec 19 '18 at 19:22
how would you do this with React-Router? – user3125823 Dec 19 '18 at 21:50
1

I actually got this working with the ternary, using loading as state. However, I still only want the results to display if on the '/results' route? – user3125823 Dec 19 '18 at 21:59
@user3125823 post your answer as a community wiki so myself and others can work on making the answer better :D https://stackoverflow.blog/2011/08/19/the-future-of-community-wiki/ – Dec 20 '18 at 03:18

How can I conditionally render search results with ReactiveBase

2 Answers2