如何在 React 组件中修复列表样式计划的渲染

Question

I am trying to create a 'simple' schedule of events for a React app. I'm using this Codepen for inspiration. There aren't events for every day and some days have more events than others.

I was finally able to create one 'date' header (on the left) for each date, without repeating, and to then display one time block on the right for all of the events in that day. However, I can't get it to render properly. I've tried everything I can think of in terms of padding, margins, alignment, etc. I've also tried moving things into and out of different divs to see if that was the issue.

I'm not sure how to get this issue to display in a Codepen or JSFiddle with the JSX and React components, etc. I've copied the code into this Codepen regardless -- hopefully it's enough to convey the issue. This is the main relevant section:

  render() {
this.restructureData();
return (
  <div>
    <br></br>
    <h1>Availability</h1>
    {/* {this.renderTimeslots()} */}
    <div className="schedule-div">
      <ul className="main">{this.betterRenderTimeslots()}</ul>
    </div>
  </div>
);

  betterRenderTimeslots = () => {
const newObject = this.restructureData();
let allDays = [];
for (let date in newObject) {
  let onThisDay = (
    <>
      <h3>{date}</h3>
      <li className="events">
        <ul className="events-detail">
          {newObject[date].map(timeslot => {
            return (
              <li>
                {<span className="event-time">{timeslot.hour}:00</span>}
              </li>
            );
          })}
        </ul>
      </li>
    </>
  );
  allDays.push(onThisDay);
}
return allDays;

};

The accompanying CSS is pasted into the Codepen above. Here's a screenshot of what it looks like for me. Thank you!

Answer 1

Your H3 header is not inside LI element, that's why it's falling out