Не могу понять в чем дело с react'ом?

Question

[DeniSidorenko]

Добрый день, захотел вывести несколько и выдает такую страную ошибку в браузере, тем не менее компиляции успешна

index.js

import React from 'react'
import {render} from 'react-dom'
import ArticleList from './ArticleList'
import {articles} from './fixtures'


render(<ArticleList articles = {articles} />, document.getElementById('container'))

ArticleList.js

import React from 'react'
import Article from './Article'

export default function ArticleList({articles}){
  return(
    <ul>
      <li>Article article = {articles[0]}</li>
      <li>Article article = {articles[1]}</li>
      <li>Article article = {articles[2]}</li>
    </ul>
  )
}

Article.js

import React, {Component} from 'react'

// *********************************** Более сложный синтакс с ООП подходом ************** //

export default class Article extends Component{         // Class Article
  constructor(props){                                   // Инициализируем Конструктор
    super(props)                                          
    
    this.state = {                                      // Состояния объекта
      isOpen: true                                     // Задаем имя и состояние объекта     
    }
  }

  render(){                                             // метод render
    const {article} = this.props                        // теперь props идет в this
    const {isOpen}  = this.state                        // Передаем в render константу isOpen
    return (
      <div>
        <h1>{article.title}</h1>
        <button onClick={this.toggleOpen}> 
          {isOpen ? 'close' : 'open'}                   
          </button>
        {this.getBody()}
      </div>
    )
  }

  getBody(){                                            // Выносим проверку в отдельные метод 
    if(!this.state.isOpen) return null                  // Если закрыто ничего не делаем
    const {article} = this.props                        // Если открыто возврощаем section 
    return <section>{article.text}</section>
  }
  toggleOpen = () => {                                  // Описание объкта toggleOpen
    this.setState({
      isOpen: !this.state.isOpen
    })
  }
}

Как показывает браузер ошибка в ArticleList.js но нифига не могу понять почемуу

Вот текст ошибки

Answer 1

[DeniSidorenko]

Отвечу сам на свой вопрос

Обратите внимание на то, что импортируемый Компонент должен быть Тегом
<li><Article article = {articles[0]}/></li>