ReactJS 映射+过滤或减少 [暂停]

Question

I'm trying to make a simple booking app using react(fullcalendar.io) which is I'm kinda new
What I want is if users book on the same date , users will be merged in 1 div

Basically on the image bellow user1 and user3 should be on the same div
Can you give me any tips on how to accomplish this?

//App.js
state = {
  bookings: [
  ]
 }
 //Add Booking
 addBook = (name, ddate) => {
      let newBook ={
        id: uuid.v4(),
        name,
        ddate,
      }
      this.setState({bookings: [...this.state.bookings, newBook]})
 }
  render() {
    return (
      <div className="App">
      <div className="container">
        <AppCalendar addBook={this.addBook}/>
      </div>
      <div className="container-booking">
        <Bookings />
      <Booked  bookings={this.state.bookings} />
      </div>
    </div>
    )
  }

//AppCalendar.js
  state = {
        name: '',
    }

    //Prompt adding booking
    handleDateClick = (arg) => { // bind with an arrow function
        let name =  this.state.name;
        name = prompt("Name: ");
        this.props.addBook(name, arg.dateStr);
      }

    render() {
        return (
            <FullCalendar dateClick={this.handleDateClick} plugins={[ dayGridPlugin, interactionPlugin]} />
        )
    }

//Booked.js
render() {

       const bookingLists = this.props.bookings.map(booking => {
           return(
                <div key={booking.id}  style={bookingContainer}>
                   {booking.name } {booking.ddate} <br/><br/><br/>1/3
               </div>
           )
       })
        return (
            <div >
                {bookingLists}
            </div>
        )
    }

Answer 1

this.props.bookings.reduce((result, booking) => {
  const alreadyBookedDayIndex = result.findIndex((b) => moment(b.date).date() === moment(booking.date).date());
  if (alreadyBooekdDayIndex > -1) {
    result[alreadyBookedDayIndex].names.push(booking.name);
  } else {
    result.push({ names: [booking.name], date: booking.date });
  }
  return result;
}, []);

And then in view show

<div>{booking.names.join(' ')}&nbsp;{moment(booking.date).format('YYY-MM-DD')}</div>

MomentJS - check it out here .

Answer 2

filter gives you a proper result in an array which can be rendered as it is using map :

render() {
  return this.props.bookings
    .filter(booking => booking.date === this.state.selectedDate)
    .map(({ id, name, date }) => (
      <div key={id}>{name}, {date}</div>
    ))
  }

Answer 3

I think we need to first arrange the data from bookings array a bit. If you know about groupBy method from lodash, we can group data as per booking date and then map over that array and arrange jsx accordingly.