错误：元素类型无效：应为字符串（对于内置组件）或类/函数（对于复合组件）但得到：对象

Question

import React from 'react'

const Newslist=(props)=>{  
    const Items = props.news.map((item)=>{
    return (<h2>{item.title}</h2> )
    });
    return(<div> <Items/> </div>)
}

export default Newslist;

This piece of code is not displaying anything in the dom and showing the error

Error:Element type is invalid: expected a string (for built-in components)or a class/function(for composite components)but got:object

Answer 1

You're rendering Items as if it were a React component and not a JSX variable. As the error says, React components can only be created from strings (in the case of HTML elements), classes or functions. When you render something using the <JSX/> syntax it is passed as an argument to React.createElement . An array of JSX elements, which is what your map call returns, is not one of the accepted parameter types, so you are getting this error. I think this should work:

import React from 'react'

const Newslist=(props)=>{  
    const items = props.news.map((item)=>{
    return (<h2>{item.title}</h2> )
    });
    return(<div> {items} </div>)
}

export default Newslist;