ReactJS props.title не отображается

Question

Сообщения, которые я размещаю в базе данных (используя MongoDB), не добавляются в мою панель управления проектами, я выполнил отладку и не выдает никаких ошибок ... Может, это о том, как я их показываю?реквизит или что-то?!

Мои PageProjects:

import React, { Component } from 'react'

import Projects from '../../components/pages/Projects/Projects/Projects';
import './PageProjects.css';


class PageProjects extends Component {

state = {
    posts:[],
} 


 componentDidMount(){
 fetch('/projects')
 .then(res => res.json())
 .then(posts => this.setState({posts}));
 }

 render(){
    const projects = this.state.posts.map(post => {
        return <Projects
        key={post._id}
        title={post.title}
        typeOfProduction={post.typeOfProduction}
        />
    })
  return (
      <div>
          <section className="Posts">
          {projects}
          </section>                    
      </div>
  );

}
}
export default PageProjects;

и это мои проекты / посты:

import React, { Component } from 'react';
import './Projects.css';


const projects = (props) => (
<div className="Dashboard container-fluid">
<article className="Post" >
      <h1 >{props.title}</h1>
      <div className="Info">
         <div className="TypeOfProduction">{props.typeOfProduction}    </div>
      </div>
    </article>
</div>
 );

export default projects;

и это выглядит так:

my console.log (this.state.posts) ->

Answer 1

В вашем рендере компонента PageProjects сделайте это

  const projects = this.state.posts && this.state.posts.map(post => {
    return <Projects
    key={post._id}
    title={post.title}
    typeOfProduction={post.typeOfProduction}
    />
   })

А в вашем функциональном компоненте вам нужно добавить return

   import React, { Component } from 'react';
   import './Projects.css';


  const Projects = (props) => {
     return (<div className="Dashboard container-fluid">
           <article className="Post" >
                <h1 style={{color: "red"}}>{props.title}</h1>
                <div className="Info">
                <div className="TypeOfProduction">{props.typeOfProduction}    </div>
               </div>
          </article>
       </div>)}

 export default Projects;