renderCustomSuggestions.js

 renderCustomSuggestions() {
    return ({ loading, error, data, value, downshiftProps: { isOpen, getItemProps } }) => {
      if (loading) {
        return <div>Fetching Suggestions.</div>;
      }
      if (error) {
        return <div>Something went wrong!Error details {JSON.stringify(error)}</div>;
      }
      console.log("STATE", this.state.popular_searches);
      return isOpen && Boolean(value.length) ? ([
        <div className="custom-suggestions-box">
          <div className="popular-searches-title"> Movies</div>
          {data.slice(0, 5).map((suggestion) => (<div className="custom-suggestions-container" key={suggestion.value} {...getItemProps({ item: suggestion })}>
            {suggestion.value}
          </div>))}
          {Boolean(value.length) && (<React.Fragment>
            <div className="list-group">
              {(this.state.popular_searches.length > 0) ? <div className="popular-searches-title"> Popular Searches</div> : null}
              {this.state.popular_searches.map(listitem => (<li className="list-group-item" onClick={() => this.handleSearchClick(listitem)}>
                {listitem}
              </li>))}
            </div>
          </React.Fragment>)}
        </div>,
      ]) : null;
    };
  }