嵌入功能组件并从那里返回列表时，React应用程序中的渲染错误未返回任何内容

Question

I have the following component structure. But when I run the site I get "Nothing was returned from render." error.

Files:

Layout.jsx

import React, { Component } from "react";
import "./Layout.css";
import axios from "axios";
import Posts from "../../components/Posts/Posts";

class Layout extends Component {
  /**
   * Set a state
   */
  state = {
    posts: []
  };

  /**
   * Import data
   */
  componentDidMount() {
    axios.get("http://jsonplaceholder.typicode.com/posts").then(response => {
      this.setState({ posts: response.data });
    });
  }

  /**
   * Render
   */
  render() {
    return (
      <div className="BlogContainer">
        <Posts postList={this.state.posts} />
        <div className="fullpost">
          <h1>Full Post (Name)</h1>
        </div>
      </div>
    );
  }
}

export default Layout;

Posts.jsx

import React from "react";
import Post from "./Post/Post";

const posts = props => {
  props.postList.map(post => {
    return (
      <div className="teasers">
        <h1>Recent Posts</h1>
        <Post title={post.title} content={post.body} key={post.id} />
      </div>
    );
  });
};

export default posts;

Post.jsx

import React from "react";

const post = props => {
  return (
    <div className="teaser" key={props.key}>
      <h3>{props.title}</h3>
      <p>{props.content}</p>
    </div>
  );
};

export default post;

Error message:

posts(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.

From Layout.jsx .

However, when I remove <Posts ... /> the error goes away.

If I run the map loop directly in Layout.jsx instead of embedding <Posts /> functional component, everything works well - like the following:

render() {
    return (
      <div className="BlogContainer">
        <div className="teasers">
          {this.state.posts.map(post => {
            return (
              <div className="teaser" key={post.id}>
                <h3>{post.title}</h3>
                <p>{post.body}</p>
              </div>
            );
          })}
          ;
        </div>
        <div className="fullpost">
          <h1>Full Post (Name)</h1>
        </div>
      </div>
    );
  }

What went wrong in my approach?

Answer 1

You are missing the return in your posts component

Posts.jsx

import React from "react";
import Post from "./Post/Post";

const posts = props => {
  return props.postList.map(post => {
    return (
      <div className="teasers">
        <h1>Recent Posts</h1>
        <Post title={post.title} content={post.body} key={post.id} />
      </div>
    );
  });
};

export default posts;

or you could skip the return but also remove the wrapping {}

import React from "react";
import Post from "./Post/Post";

const posts = props => props.postList.map(post => (
      <div className="teasers">
        <h1>Recent Posts</h1>
        <Post title={post.title} content={post.body} key={post.id} />
      </div>
    ));

export default posts;