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>
    );
  }
}

CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top