" Objects are not valid as a React child (found: object with keys {})."

Question

class Home extends PureComponent {
    render() {
        const { proList } = this.props;   
        return (
            <HomeWrap>
                <Banner />
                <Profile />
                <div className="projectWrap">
                    <div className="hotRecommended">
                        {
                            this.hotRecommendList(proList)
                        }
                    </div>      
                </div>
            </HomeWrap>
        )
    }
    hotRecommendList(list) {
        let hotTarget = list.filter(item => item.tag === 'hot');
        return hotTarget.map((target, index) => {
            return (
                <Project key={index} /> 
            )
        })   
    }
}

the error is: Uncaught Error: Objects are not valid as a React child (found: object with keys {}). If you meant to render a collection of children, use an array instead.

get the json file proList like this:

[
  {
    "id": 1,
    "img": "https://gw.alicdn.com/tfs/TB1wx_RQFXXXXbGXFXXXXXXXXXX-250-125.png_200x200q85s150.jpg_.webp",
    "desc": "英国证券交易所,国家：英国, 适合人群：本科毕业生 专科毕业生,时间：2019.01.08-2019.02.08",
    "tag": "hot"
  },
  {
    "id": 2,
    "img": "https://gw.alicdn.com/tfs/TB1wx_RQFXXXXbGXFXXXXXXXXXX-250-125.png_200x200q85s150.jpg_.webp",
    "desc": "美国白宫,国家：美国, 适合人群：美籍华人 老外, 时间：2019.01.08-2019.02.08",
    "tag": "quality"
  }
]

Answer 1

Now I think I know, The Project component get an object but render it incorrect, finially the project component like this:

class Project extends PureComponent {
    constructor(props) {
        super(props);
        console.log('projcet component props', props);

    }

    render() {
        let { target }  = this.props;
        console.log('target', target);

        return (
            <ProjectWrap>
                <div>{target.desc}</div>
            </ProjectWrap>
        )
    }
}