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 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 (
        {cards?.length && <CardRender cards={cards}/>}

CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top