Ошибка: недопустимый тип элемента: ожидается строка (для встроенных компонентов) или класс / функция (для составных компонентов), но получено: object

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;

Этот фрагмент кода не отображает ничего в dom и показывает ошибку

Ошибка: недопустимый тип элемента: ожидается строка (для встроенных компонентов) или класс / функция (для составных компонентов), но получила: объект

Answer 1

Вы визуализируете Items, как если бы это был компонент React, а не переменная JSX. Как говорится в ошибке, компоненты React могут быть созданы только из строк (в случае HTML элементов), классов или функций. Когда вы визуализируете что-то с использованием синтаксиса <JSX/>, оно передается в качестве аргумента React.createElement. Массив элементов JSX, который возвращает ваш вызов map, не относится к числу допустимых типов параметров, поэтому вы получаете эту ошибку. Я думаю, что это должно работать:

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;