CODEWITHSUNDEEP
javascriptcsshtmlreactjscomponents
The_Enigma
The_Enigma

Reputation: 117

Component wont render

I am passing an array of objects to TileFeed and am taking out thumbnail URLS to be used for each tile on the page. The URLS are being extracted, but the actual tile isn't rendering for some reason. When I console out the thumb.thumbnail I get the correct output.enter image description here

class TileFeed extends Component {
  render() {
    const { thumbnail } = this.props;
    return thumbnail.map(thumb => {
      console.log(thumb.thumbnail);
      <div key={thumb._id} className="row__inner">
        <div className="tile">
          <div className="tile__media">
            <img
              className="tile__img"
              id="thumbnail"
              src={thumb.thumbnail}
              alt=""
            />
          </div>
        </div>
      </div>;
    });
  }
}

Class that calls TileFeed

render() {
    const { videos, loading, key } = this.props.videos;
    let videoContent;
    if (videos === null || loading) {
      videoContent = <Spinner />;
    } else {
      videoContent = <TileFeed thumbnail={videos} />;
    }
    console.log({ videoContent });

    return (
      <div className="explore">
        <div className="row">{videoContent} </div>
      </div>
    );
  }

Upvotes: 1

Views: 34

Answers (1)

Tholle
Tholle

Reputation: 112807

You are not returning the JSX from the function given to map. Add a return statement or remove the function body {} to make the return implicit.

class TileFeed extends Component {
  render() {
    const { thumbnail } = this.props;
    return thumbnail.map(thumb => {
      return (
        <div key={thumb._id} className="row__inner">
          <div className="tile">
            <div className="tile__media">
              <img
                className="tile__img"
                id="thumbnail"
                src={thumb.thumbnail}
                alt=""
              />
            </div>
          </div>
        </div>
      );
    });
  }
}

Upvotes: 2

Related Questions