چرا توی ری‌اکت چیزی برام برنمیگردونه و یه صفحه خالیه

این مال اپمه

/* eslint-disable array-callback-return */
import React, { useState } from "react";
import "./App.css";
import Card from "./Card";

function App() {
  const [stateArticle, setArticleState] = useState({
    //hooks
    articles: [
      {
        id: 1,
        title: "article 1",
        body: "this is article 1",
      },
      {
        id: 2,
        title: "article 2",
        body: "this is article 2",
      },
      {
        id: 3,
        title: "article 3",
        body: "this is article 3",
      },
    ],
    loading: false,
    btnHover: false,
  });
  let mosueEnter = (e) => {
    setArticleState({
      btnHover: true,
    });
  };

  let mosueLeave = (e) => {
    setArticleState({
      btnHover: false,
    });
  };
  let articleList = a.articles.map((article, index) => {
    return <Card key={index} title={article.title} body={article.body} />;
  });
  let btnclasses = ["btn-load"];

  if (this.state.btnHover) {
    btnclasses.push("active");
  }

  console.log(btnclasses);
  let a = {
    articles: [
      { id: 4, title: "article 4", body: "this is article 4" },
      { id: 5, title: "article 5", body: "this is article 5" },
      { id: 6, title: "article 6", body: "this is article 6" },
    ],
  };
  function loadMore() {
    setArticleState({
      articles: [...stateArticle.articles, ...a.articles],
    });
  }
  return (
    <div className="app">
      {articleList}
      {this.state.loading ? <div>Loading ...</div> : null}
      <button
        // className={`btn-more ${this.state.btnHover ? 'active' : ''}`}
        className={btnclasses.join(" ")}
        onClick={loadMore}
        onMouseEnter={mosueEnter}
        onMouseLeave={mosueLeave}
      >
        load more
      </button>
    </div>
  );
}
export default App;

اینم کارت

import React, { Component } from "react";

class Card extends Component {
  eventHandler(e) {
   console.log("click");
  }

  render() {
    let { title, body } = this.props;

    return (
      <div className="card">
        <header className="card-header">
          <h2>{title}</h2>
        </header>
        <section className="card-body">
          <p>{body}</p>
          <button onClick={this.eventHandler.bind(this, "xxxxx")} className="card-btn">Click</button>
        </section>
        <footer>
          <p>Card Footer</p>
        </footer>
      </div>
    );
  }
}

export default Card;