Loop through API to split data

Question

I want to build a simple meeting booking app. I am using fetch to get the api. One of the data has a startDate and endDate with different starting and ending dates. So I want to loop to that data and split it so it becomes two different meetings. But I am stuck at the moment on how to do this and need some new ideas.

This is the api I have used. http://www.mocky.io/v2/5c9cdca03300004d003f2151

的上下文单词/字符

import React, { Component } from "react";
import "./App.css";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      items: [],
      isLoaded: false
    };
  }
  componentDidMount() {
    fetch("http://www.mocky.io/v2/5c9cdca03300004d003f2151")
      .then(res => res.json())
      .then(json => {
        this.setState({
          isLoaded: true,
          items: json
        });
      });
  }

  render() {
    var { isLoaded, items } = this.state;

    if (!isLoaded) {
      return <div>Loading...</div>;
    } else {
      return (
        <div className="App">
          <div className="AppHeader">
            <h1>Boka ditt möte nedan</h1>
          </div>
          <ul>
            {items.map(item => (
              <li key={item.id}>
                <button className="select">
                  {item.activity}
                  <br />
                  Starttid: {item.startDate}
                  <br />
                  Sluttid: {item.endDate}
                  <br />
                  Plats: {item.location}
                  <br />
                </button>
              </li>
            ))}
          </ul>
          {/* visas inte innan möte */}
          <button className="saveBooking">Bekräfta bokning</button>
        </div>
      );
    }
  }
}

export default App;