组件不会渲染

Question

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.

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

Answer 1

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