Render a Competition with events using the Cloudbet Market Helper

cloudbet_market_helper_competition.js

//Competition.js
import "./styles.css";
import React from "react";
function getCompetition(competition) {
  return fetch(
    `https://sports-api.cloudbet.com/pub/v2/odds/competitions/${competition}`,
    {
      headers: {
        "X-Api-Key": "",
        "cache-control": "max-age=600"
      }
    }
  );
}
export default function Competition({ competition, sportKey }) {
  const [events, setEvents] = React.useState([]);
  const [loading, setLoading] = React.useState(false);
  const [expanded, setExpanded] = React.useState(false);
  const loadEvents = (key) => {
    setExpanded((e) => !e);
    if (events.length || loading) {
      return;
    }
    setLoading(true);
    getCompetition(key)
      .then((response) => response.json())
      .then((body) => {
        setEvents(body.events);
        setLoading(false);
      });
  };
  return (
    <div className="competition">
      <div
        className="competition-title"
        onClick={() => loadEvents(competition.key)}
      >
        {competition.name}
      </div>
      {expanded && (
        <div>
          {loading ? (
            <Loading />
          ) : (
            events.map((e) => <div>{e.id}</div>)
          )}
        </div>
      )}
    </div>
  );
}
function Loading() {
  return Loading...;
}