title: How do I perform a filter function on data from an Axios API call in React?
body: <p>I am having trouble displaying my yogaCard in the return statement. When I call it as <code>{yogaCard}</code> I get a message saying it is undefined.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>  if (yogas.length &gt; 0) {
  
                  let yogaCard = yogas.filter((yoga) =&gt; {
                          if (searchPose === "") {
                              return yoga
                          }
                          else if (
                              yoga.english_name.toLowerCase().includes(searchPose.toLocaleLowerCase())) {
                                  return yoga
                              }
                      }).map((yoga) =&gt; (
                     &lt;div key={yoga.id} style={{width: '20%' }} className="card"  
                      &gt;
                      &lt;img className='yogaphoto' src={yoga.img_url}/&gt;
                      &lt;div className="card-body"&gt;
                        &lt;h2&gt;{yoga.english_name}&lt;/h2&gt;
  
                      &lt;/div&gt;
                    &lt;/div&gt;
                      ))
              }
   return (
              &lt;&gt;           
  &lt;div className="yoga"&gt; 
      &lt;div className='yogasearch'&gt;
             &lt;h1&gt;Yoga Poses&lt;/h1&gt; 
             &lt;input type="text" class="input" placeholder="Search by pose" onChange={event =&gt; {setSearchPose(event.target.value)}}/&gt;
  
      &lt;/div&gt;
  
          &lt;div className="row"&gt;
               {yogaCard}
          &lt;/div&gt;
  
      
  &lt;/div&gt;
  
              &lt;/&gt;
          )    
  
      }
          
      
      export default IndexYogas</code></pre>
  </div>
  </div>
  </p>