title: React js dateFns problem on codesandbox 'format' of undefined
body: <p>Error:</p>
  
  <pre><code>Cannot read property 'format' of undefined
  </code></pre>
  
  <p>Error in code:</p>
  
  <pre><code>&lt;span&gt;{dateFns.format(currentDate, dateFormat)}&lt;/span&gt;
  </code></pre>
  
  <p><a href="https://codesandbox.io/s/nostalgic-neumann-22dl1" rel="nofollow noreferrer">Link</a></p>
  
  <p>Code:</p>
  
  <pre><code>import React, { useState } from "react";
  import dateFns from "date-fns";
  import "./Calendar.css";
  const Calendar = () =&gt; {
    const [currentDate, setCurrentDate] = useState(new Date());
    const [selectedDate, setSelectedDate] = useState(new Date());
    const header = () =&gt; {
      const dateFormat = "MMMM YYYY";
      return (
        &lt;div className="header row flex-middle"&gt;
          &lt;div className="column col-start"&gt;
            &lt;div className="icon" onClick={prevMonth}&gt;
              chevron_left
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div className="column col-center"&gt;
            &lt;span&gt;{dateFns.format(currentDate, dateFormat)}&lt;/span&gt;
          &lt;/div&gt;
          &lt;div className="column col-end"&gt;
            &lt;div className="icon" onClick={nextMonth}&gt;
              chevron_right
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    };
    const days = () =&gt; {
      const dateFormat = "ddd";
      const days = [];
      let startDate = dateFns.startOfWeek(currentDate);
      for (let i = 0; i &lt; 7; i++) {
        days.push(
          &lt;div className="column col-center" key={i}&gt;
            {dateFns.format(dateFns.addDays(startDate, i), dateFormat)}
          &lt;/div&gt;
        );
      }
      return &lt;div className="days row"&gt;{days}&lt;/div&gt;;
    };
    const cells = () =&gt; {
      const monthStart = dateFns.startOfMonth(currentDate);
      const monthEnd = dateFns.endOfMonth(monthStart);
      const startDate = dateFns.startOfWeek(monthStart);
      const endDate = dateFns.endOfWeek(monthEnd);
      const dateFormat = "D";
      const rows = [];
      let days = [];
      let day = startDate;
      let formattedDate = "";
      while (day &lt;= endDate) {
        for (let i = 0; i &lt; 7; i++) {
          formattedDate = dateFns.format(day, dateFormat);
          const cloneDay = day;
          days.push(
            &lt;div
              className={`column cell ${
                !dateFns.isSameMonth(day, monthStart)
                  ? "disabled"
                  : dateFns.isSameDay(day, selectedDate)
                  ? "selected"
                  : ""
              }`}
              key={day}
              onClick={() =&gt; onDateClick(dateFns.parse(cloneDay))}
            &gt;
              &lt;span className="number"&gt;{formattedDate}&lt;/span&gt;
              &lt;span className="bg"&gt;{formattedDate}&lt;/span&gt;
            &lt;/div&gt;
          );
          day = dateFns.addDays(day, 1);
        }
        rows.push(
          &lt;div className="row" key={day}&gt;
            {" "}
            {days}{" "}
          &lt;/div&gt;
        );
        days = [];
      }
      return &lt;div className="body"&gt;{rows}&lt;/div&gt;;
    };
    const nextMonth = () =&gt; {
      setCurrentDate(dateFns.addMonths(currentDate, 1));
    };
    const prevMonth = () =&gt; {
      setCurrentDate(dateFns.subMonths(currentDate, 1));
    };
    const onDateClick = day =&gt; {
      setSelectedDate(day);
    };
    return (
      &lt;div className="calendar"&gt;
        &lt;div&gt;{header()}&lt;/div&gt;
        &lt;div&gt;{days()}&lt;/div&gt;
        &lt;div&gt;{cells()}&lt;/div&gt;
      &lt;/div&gt;
    );
  };
  export default Calendar;
  </code></pre>
  
  <p>Can you give me some advice?</p>