Cloudbet Market Helper - Game Lines React Component

cloudbet_market_helper_game_lines_component.js

//GameLines.js
import "./styles.css";
import React from "react";
import {
  MarketType,
  getMarket,
} from "@cloudbet/market-helper";
const sportMarketsGameLine = {
  'basketball': [MarketType.basketball_handicap, MarketType.basketball_totals, MarketType.basketball_moneyline]
};
export default function GameLines({ event, sportKey }) {
  const homeName = event.home.name;
  const awayName = event.away.name;
  const [ headers, home, away ] = React.useMemo(() => {
     //...Memo logic from above goes here
     return [ headers, home, away ];
  }, [event, sportKey, homeName, awayName]);
  if (!headers.length || !home.length || !away.length) {
    return null;
  }
  return (
    <div>
      {<div className="game-lines-title">{'Game Lines'}</div>}
      {<div className="selections">
          {headers.map((header) => (
            <div className="header-text">
              {header}
            </div>
          ))}
      </div>}
      {<div className="selections">
          {home.map((value, index) => (
            index === 0 ? (
              <div className="selection">
                {value}
              </div>
            ) : (
              <div className="selection">
                {value.name} <br />
                <div className="price">{value.price}</div>
              </div>
            )
          ))}
      </div>}
      {<div className="selections">
          {away.map((value, index) => (
            index === 0 ? (
              <div className="selection">
                {value}
              </div>
            ) : (
              <div className="selection">
                {value.name} <br />
                <div className="price">{value.price}</div>
              </div>
            )
          ))}
      </div>}
    </div>
  );
}