how to render a stateless functional component from another component

You should add the <CardRender cards={cards}/> to the element render returns (at the place you want it to be) and render it if state.cards is not empty.

Something like this

class SearchCard extends Component {
  // qQuery is a variable for query input
  state = { qQuery: "" };
  
  HandleSearch= async (e) => {
    // ...
    this.setState({ cards : searchResults }); 
  }

  render() {
    return (
      <div>
        ...
        {cards?.length && <CardRender cards={cards}/>}
      </div>
    );
  }
}