How Can I render a list dynamically using react-calendar?

Question

I want to render a list of classes scheduled in a certain date once the user clicks on this date, on the calendar, displayed on the App.

I am using react-calendar for this.

I have made a test using onClickDay function available in order to see if it would render a list I had and it worked. So when I click on any day a list is rendered.

What I want now is to render a list related to the date picked on the calendar. Eg - Render all classes for Feb-13th upon clicking on the calendar on Feb-13th.

I imagine that I would need to set the date and time on the array of classes on my state so I could validate if the date picked on the calendar matches what was set on the state to render the appropriate list accordingly.

I did not find on the documentation of this library how to do this kind of validation that would compare the date in the calendar with whatever date I have on my array of classes.

please see the complete code here

Below is the print of this code snippet:

import React from "react";
import "./styles.css";
import Calendar from "react-calendar";

class App extends React.Component {
  state = {
    date: new Date(),
    classes: [
               { id: 1, name: "foo1" }, 
               { id: 2, name: "foo2" }
             ],
    displayClasses: false
  };

  onChange = date => this.setState({ date });
  displayClasses = () => {
    this.setState({ displayClasses: true });
  };
  render() {
    let classes = null;
    if (this.state.displayClasses) {
      classes = this.state.classes.map(cl => {
        return <li key={cl.id}>{cl.name}</li>;
      });
    }
    return (
      <div className="App">
        <Calendar
          onChange={this.onChange}
          value={this.state.date}
          onClickDay={this.displayClasses}
        />
        <br />
        <ul>{classes}</ul>
      </div>
    );
  }
}

export default App;

Answer 1

The onChange handler gives you the date (as a date object), the user has clicked on as a first argument.

You could simply check if the date is your specific date where you would like conditionally display something. For example with date.valueOf() , you get the date in milliseconds.

import React from "react";
import "./styles.css";
import Calendar from "react-calendar";

class App extends React.Component {
  state = {
    date: new Date(),
    classes: [{ id: 1, name: "foo1" }, { id: 2, name: "foo2" }],
    displayClasses: false,
  };

  onChange = date => {
    this.setState({ date });
  };

  displayClasses = () => {
    this.setState({ displayClasses: true });
  };

  render() {
    const { classes, date } = this.state;

    return (
      <div className="App">
        <Calendar
          onChange={this.onChange}
          value={this.state.date}
          onClickDay={this.displayClasses}
        />
        <br />
        <ul>
          {date.valueOf() === 1581548400000 &&
            classes.map(cl => {
              return <li key={cl.id}>{cl.name}</li>;
            })}
        </ul>
      </div>
    );
  }
}

export default App;