How can I render out to page no results when my search field is empty, but still render asynchronously when searching?

Question

I'm rendering to page a bunch of buttons based on what a user is typing. Basically the user starts typing and with each letter pressed a new set of buttons is rendered to the page where an obj.content contains the string being typed. This is all working fine, but I have one small problem. When a user first enters the program all of the buttons are rendered out to the page showing all options. I would like to show zero buttons if nothing is being searched for.

As of right now the normal state is looking for any matches of '', which every string that is searched contains so every button is rendered out to the screen.

Is there a way to render out zero buttons if my search fields are empty?

I have tried...

const RenderSearchResults = () => {
  <div>
    {renderResults}
  </div>
}


const renderResults = this.props.data.filter(obj => {
  return obj.content.includes(this.state.keyToFind);
 }).map((obj, idx) => {
   return (
      <button name={obj.name} value={this.state.btnToFind} key={idx}>{obj.title}   </button>
 )
});

// FROM THE MAIN COMPONENT RETURN

return (
  <input type="text name="keyToFind" placeholder="SEARCH" value={this.state.keyToFind} onChange={this.handleChange.bind(this} /> <br />
    {this.state.keyToFind !== '' ? <RenderSearchResults /> : console.log("no input")}
)

---

// THIS WORKS BUT STARTS WITH ALL BUTTONS RENDERED OUT
return (
  <input type="text name="keyToFind" placeholder="SEARCH" value={this.state.keyToFind} onChange={this.handleChange.bind(this} /> <br />
  {renderResults}
)

However the above method doesn't update when a user starts typing. The only way I can get the search / render to work asynchronously is if I just place {renderResults} into the main component return without the if statement checking to see if the search field is empty. However, this results in all possible buttons being rendered out to page as the normal state.

Anyway to start with nothing being rendered out to the page?

Answer 1

I created a small example similar to what you are describing but much more simplified. Here I am checking if keyToFind is empty string and returning an empty array directly from the method that does the rendering.

class RenderButtons extends React.PureComponent {
    state = {
      keyToFind: ''
    }

    renderResults = () => {
      if (this.state.keyToFind === '') return [];

      const renderResults = ['a', 'b', 'c', 'aa']
          .filter(obj => {
              return obj.indexOf(this.state.keyToFind) >= 0;
          })
          .map((obj, idx) => {
              return (<button name={obj} value={obj} key={idx}>{obj}</button>)
          });

      return renderResults;
    }

    handleChange = (event) => {
      this.setState({ keyToFind: event.target.value });
    }
    render () {
      const renderResults = this.renderResults();
      return (
          <div>
          <input type="text" value={this.state.keyToFind} onChange={this.handleChange} />             
          {renderResults}
        </div>          
      );
    }
}

Here is a working example on codesandbox .