title: How to render a stateless functional component from another component
body: <p>I'm new on React. I wrote a project on which there is a search component. the search works fine ( I checked on <code>console.log</code>) but I don't know how to call the stateless function component on which the search results should be shown?</p>
  <pre class="lang-js prettyprint-override"><code>class SearchCard extends Component {
    // qQuery is a variable for query input
    state = { qQuery: &quot;&quot; };
    
    HandleSearch= async (e) =&gt; {
      e.preventDefault();
      const {data:cards}  = await cardService.getAllCards();
      var searchResults = cards.filter((item) =&gt;
        item.qTopic.includes(this.state.qQuery) || 
        item.qArticle.includes(this.state.qQuery)
      );
      this.setState({ cards : searchResults }); 
      //   console.log('search results ',searchResults, '  cards ',this.state);
      return &lt;CardRender cards={cards}/&gt; 
    }  
  
    render() {
      return (
        &lt;React.Fragment&gt;
          &lt;form className=&quot;form&quot; onSubmit={ this.HandleSearch }&gt;
            &lt;div className=&quot;input-group md-form form-sm form-1 pl-4 col-12&quot;&gt;
  </code></pre>
  
  <hr />
  <pre class="lang-js prettyprint-override"><code>const CardRender = ({cards,favs,onHandleFavs}) =&gt; {
    return (         
      &lt;div className=&quot;row&quot;&gt;
        {cards.length &gt; 0 &amp;&amp;
          cards.map((card) =&gt;
            &lt;Card key={card._id}
              card={card} 
              favs={favs} 
              onHandleFavs={() =&gt; onHandleFavs(card._id)}
            /&gt;
        }
      &lt;/div&gt;
   );
  }
       
  export default CardRender;
  </code></pre>
  <p><a href="https://i.stack.imgur.com/4Ga7Z.jpg" rel="nofollow noreferrer">screenshot</a></p>