вывод компонентов reactjs

// Статья 
class Article extends Component { 
    constructor(props){ 
        super(props) 
        this.state={ 
            modeClose: props.defaultOpen 
        } 
    } 
    onHandle = () => { 
        console.log('Clicked'); 
        this.setState({ 
            modeClose: !this.state.modeClose 
        }) 
    } 
    render() { 
        const {article} = this.props; 
        const body = this.state.modeClose && <section className="card-text">{article.text}</section>; 
        return ( 
            <div className="card mx-auto" style={{}}> 
                <div className="card-header"> 
                <h2 className="d-inline-block">{article.title}</h2> 
                <button onClick={this.onHandle} className="btn btn-primary btn-lg float-right">Close</button> 
                </div> 
                <div className="card-body"> 
                    <h6 className="text-muted card-text"> creation date: {(new Date(article.date)).toDateString()}</h6> 
                    {body} 
                </div> 
                </div> 
        ) 
    } 
} 
 
//Вывод компонента ArticleList 
export default function articleList({articles}){ 
    const artcileElements = articles.map((article,index) => <li className="article-list__li" key={article.id}><Article article= {article} defaultOpen= {index=== 0} /></li> ) 
    return <ul> 
        {artcileElements} 
    </ul> 
}