title: How to show all elements on page load (currently being filtered out) - React
body: <p>I have a page that shows a grid of images with a title, description, author, and some other additional information all pulled in from my SQL table (data is <code>marketplaceData</code>).</p>
  <p>I have built a search bar for the page to filter through the grid of images, and it works great. As soon as I start typing, the filtered images show. When I backspace until my input value is <code>&quot;&quot;</code>, all the images in the grid show.</p>
  <p>My issue is that on page load (or when I refresh), the grid is empty and all the images have been filtered out. What do I need to change/add in order to make sure the full grid of images is not filtered to begin with? Many thanks in advance.</p>
  <pre><code>const MarketplaceGrid = ({ classes }) =&gt; {
  
    const marketplaceData = useSelector(
        (state) =&gt; state.marketplace.marketplaceData
      );
  
    const [search, setSearch] = useState(&quot;&quot;);
    
    const [filteredResults, setFilteredResults] = useState(marketplaceData);
  
  
    const handleChange = (event) =&gt; {
      console.log(&quot;hi from onChange&quot;, event.target.value)
      setSearch(event.target.value);
      if (event.target.value !== &quot;&quot;) {
         setFilteredResults(marketplaceData.filter(item =&gt; item.alg_name.toLowerCase().includes(event.target.value.toLowerCase()) || 
         item.alg_description.toLowerCase().includes(event.target.value.toLowerCase()) ||
         item.author.toLowerCase().includes(event.target.value.toLowerCase()) ||
         item.alg_type.toLowerCase().includes(event.target.value.toLowerCase())
         ))
        }
      else {
        setFilteredResults(marketplaceData)
      }
      };
      
      return (
        &lt;main className={classes.content} &gt;
  
        &lt;div&gt;{JSON.stringify(marketplaceData[&quot;alg_name&quot;])}&lt;/div&gt;
  
        &lt;div className={classes}&gt;
              &lt;div className={classes}&gt;
                &lt;SearchIcon /&gt;
              &lt;/div&gt;
              &lt;InputBase
                placeholder=&quot;Search by Model Name&quot;
                classes={{
                  root: classes.inputRoot,
                  input: classes.inputInput,
                }}
                inputProps={{ 'aria-label': 'search' }}
                onChange={handleChange}
                value={search}
              /&gt;
            &lt;/div&gt;
  
          &lt;GridContainer&gt;
            {filteredResults.map((marketplace, i) =&gt; (
              &lt;GridItem xs={1} sm={2} md={3} key={i}&gt;
                &lt;MarketplaceCard {...marketplace} classes={classes} alg_classes={marketplace.classes}
                  //pass down all properties of marketplace as props
                /&gt;
              &lt;/GridItem&gt;
            ))}
         
          &lt;/GridContainer&gt;
          &lt;/main&gt;
      );
    };
    
    export default MarketplaceGrid;
  </code></pre>