Thierry Oke Starter Modal Body

starter.js

import { useState } from 'react';
import moment from 'moment';

// Once you fix your modal, logic, this component can be used
// as a starting point for the content of the modal
// this will need to be styled and tied into the filter logic for the games outside of the modal
// either in a parent state, or global context/redux so that when you close the modal
// the page will have access to the selected date and update results
// npm i --save moment (if you don't already have it)
// check out flexbox if you are unfamiliar, you can use css flexbox to
// figure out how to line up the items within the parent container
// also if you need a better modal component you can install Material ui and material ui icons to 
// create a modal that will work better
// https://www.npmjs.com/package/@material-ui/core
const DateSelectorModalBody = () => {
  const today = moment();

  const [dates, setDates] = useState([
    {
      date: today.subtract(1, 'days').format('MMMM · DD'),
      title: 'Yesterday',
      selected: false,
    },
    {
      date: today.format('MMMM · DD'),
      title: 'Today',
      selected: true,
    },
    {
      date: today.add(1, 'days').format('MMMM · DD'),
      title: 'Tomorrow',
      selected: false,
    },
    {
      date: today.add(2, 'days').format('MMMM · DD'),
      title: today.add(2, 'days').day(),
      selected: false,
    },
    {
      date: today.add(3, 'days').format('MMMM · DD'),
      title: today.add(3, 'days').day(),
      selected: false,
    },
    {
      date: today.add(4, 'days').format('MMMM · DD'),
      title: today.add(4, 'days').day(),
      selected: false,
    },
    {
      date: today.add(5, 'days').format('MMMM · DD'),
      title: today.add(5, 'days').day(),
      selected: false,
    },
  ]);

  const selectDate = (date, index) => {
    const updatedDates = [...dates].map((d, i) => {
      if (i === index) {
        return { ...d, selected: true };
      }

      return { ...d, selected: false };
    });

    setDates(updatedDates);
  };

  const renderList = () => {
    return dates.map((date, i) => {
      return (
        <div className="list-item" key={i} onClick={() => selectDate(date, i)}>
          {date.selected ? <span>Check Mark Goes Here</span> : null}
          <span>{date.title}</span>
          <span>{date.title}</span>
          <span>{date.date}</span>
        </div>
      );
    });
  };

  return (
    <div className="parent">
      <div className="header">
        <div>
          <span>Calendar Icon</span>
        </div>
        <div>
          <span>Select a Date</span>
        </div>
        <div>
          <span>Close Icon</span>
        </div>
      </div>
      <div className="list">{renderList()}</div>
    </div>
  );
};

export default DateSelectorModalBody;