How do i get and apply today value with moment.js?(react.js)

Question

Currently, I am making a calendar in React.js with Moment.js

and I also tried to add some buttons which I can go back and forth for

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/0.14.7/react-dom.min.js"></script>

import './App.css';
import React,{useState} from 'react';
import moment from 'moment';
function App() {
  const [getMoment,setMoment] = useState(moment());
  const today = getMoment;
  const firstWeek = today.clone().startOf('month').week();
  const lastWeek = today.clone().endOf('month').week() === 1 ? 53 : today.clone().endOf('month').week();
  const calendarArr=()=>{
    let result=[];
    let week=firstWeek;
    for(week; week <=lastWeek; week++){
      result =result.concat(
        <tr key={week}>
           {
              Array(7).fill(0).map((data, index) => {
                let days = today.clone().startOf('year').week(week).startOf('week').add(index, 'day');

                if(moment().format('YYYYMMDD') === days.format('YYYYMMDD')){
                  return(
                      <td key={index} className="today" >
                        <span>{days.format('D')}</span>
                      </td>
                  );
                }else if(days.format('MM') !== today.format('MM')){
                  return(
                      <td key={index} className="other" >
                        <span>{days.format('D')}</span>
                      </td>
                  );
                }else{
                  return(
                      <td key={index}  >
                        <span>{days.format('D')}</span>
                      </td>
                  );
                }
              })
            }

        </tr>);
      }
      return result;
  }
  
  return(
  <>
  <div className="calendar-layout">
    <div className="calendar">
    <div className="control nav">
          <span>{today.format('YYYY  MM ')}</span> 
          <button onClick={()=>{setMoment(getMoment.clone().subtract(1, 'month'))}}> previous month</button>
          <button onClick={()=>{setMoment(getMoment.toDate())}}>this month</button>
          
          <button onClick={()=>{setMoment(getMoment.clone().add(1, 'month'))}} >next month</button>
        </div>
        <table>
          <tbody>
            {calendarArr()}
          </tbody>
        </table>
    </div>
    </div>

   </>
  )
}

export default App;

months.

previous month and next month buttons are okay, but this month button doesn't work somehow and return this error:TypeError: today.clone is not a function

can you explain what is wrong with my code and how to solve it?

thx!

Answer 1

It is happening because you are converting the moment object to a date object when you do getMoment.toDate()(check this). Since you are changing the state using setMoment, the page is re-rendered which in-turn calls const firstWeek = today.clone() (line number 3 of the App function component)and since today is a Date object, which does not have a clone function, the error is thrown. You could use the below code to set the moment back to the current time.

<button onClick={()=>{setMoment(moment())}}>this month</button>