Can't render return statements inside map function in React

Question

I am trying to render components from a function inside my render statement. I have two map functions and I am trying to return the code. Here is a part of my code:

renderRNAseq() {
  const rnaSeq = [];
  if (this.state.dataLoaded) {
    this.state.resources.map(resource => {
      if (resource.category == 'RNA-seq') {
        rnaSeq.push(resource);
      }
    })

    return (
      rnaSeq.map(res => {
        console.log(res);
        <Container>
          <Row>
            <Col sm={4}>
              <div className="webApp" key={res.id}>
                <Link to={`/apps/${res.parameter}`}><img src={res.logo} /> </Link>
                <h4>{res.title}</h4>  
              </div>
            </Col>
          </Row>
        </Container>
      }))          
  } else {
    <p>Loading...</p>
  }
}

render() {
  return (
    <Container className="apps">    
      {this.renderRNAseq()}
    </Container>
  )
}

When I did console log, they returned all of the objects in the rnaSeq array, so I know the objects are being pushed into the array, and they should return... but they're not rendering on my site. What's the issue?

Thanks!

Answer 1

renderRNAseq() {
        const rnaSeq = [];
        if (this.state.dataLoaded) {
            this.state.resources.map(resource => {
                if (resource.category == 'RNA-seq') {
                    rnaSeq.push(resource);
                }
            })
                return (
                    rnaSeq.map(res => {
                return <Container>
                        <Row>
                        <Col sm={4}>
                    <div className="webApp" key={res.id}>
                        <Link to={`/apps/${res.parameter}`}><img src={res.logo} /> </Link>
                        <h4>{res.title}</h4>

                    </div>
                    </Col>
                    </Row>
                    </Container>})
                )          
        } else {
            return <p>Loading...</p>
        }
    }

Answer 2

return (
  rnaSeq.map(res => {
    return (
      <Container>
        <Row>
          <Col sm={4}>
            <div className="webApp" key={res.id}>
              <Link to={`/apps/${res.parameter}`}><img src={res.logo} /> </Link>
              <h4>{res.title}</h4>
            </div>
          </Col>
        </Row>
      </Container>
    )
  }));
}

or

return (
  rnaSeq.map(res => (
      <Container>
        <Row>
          <Col sm={4}>
            <div className="webApp" key={res.id}>
              <Link to={`/apps/${res.parameter}`}><img src={res.logo} /> </Link>
              <h4>{res.title}</h4>
            </div>
          </Col>
        </Row>
      </Container>
    )
  ));
}