Refactoring class component to function component in react js

Question

I have class component now I want to convert it to function component so I started with refactoring constructor

here is my class component

class EventCalendar extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            today: this.getToday(),
        };         
    }

    getToday() {
        var today = new Date();
        return {
            day: today.getDate(),
            month: today.getMonth(),
            year: today.getFullYear(),
        };
    }

       renderCalendarDays() {
        return this.getDaysWithEvents().map((day, index) => {
            const isToday = Calendar.interval(day, this.state.today) === 1;            
            return (
                <CalendarDay 
                    day={day} 
                    isToday={isToday} 
                    />
                );
        });
    }

      render() {

        return (
                {this.renderCalendarDays()}
            </div>
        );
    }

}

Here is my refactored functional component from class

const EventCalendar =props=> {

const [today, setToday] = useState();
const calendar = new Calendar({siblingMonths: true, });

useEffect(() => {
   setToday();
},[])

const  setToday =()=>{
    var today = new Date();
    return {
        day: today.getDate(),
        month: today.getMonth(),
        year: today.getFullYear(),
    };
}
  const  renderCalendarDays = ()=>{
        return getDaysWithEvents().map((day, index) => {
            const isToday = Calendar.interval(day, today) === 1;
            return (
                <CalendarDay 
                    day={day} 
                    isToday={isToday} 

                    />
                );
        });
    }

        return (
            <div className="flexContainer">
                {renderCalendarDays()}
            </div>
        );
}

Unfortunately, I am struggling to make this work, can someone help me, what am I doing wrong here?

Answer 1

You actually have two setToday methods. In useEffect , you want to call something like this:

useEffect(() => {
   ...
   setToday(createToday());
   ...
},{})

createToday = () => {
    const today = new Date();
    return {
        day: today.getDate(),
        month: today.getMonth(),
        year: today.getFullYear(),
    };
}

Right now, when you call setToday() in useEffect , I honestly do not know if you are setting the state variable, today to null or you are calling your helper method, returning an object, but not assigning it.

Also, keep in mind useEffect is for side effects (hence the name), such as reaching out to services, doing asynchronous sorts of things, etc.

You could skip the useEffect and just run createToday in your state defintion:

const [today, setToday] = useState(createToday());

An example of how I might do this:

const createToday =()=>{
    const today = new Date();
    return {
        day: today.getDate(),
        month: today.getMonth(),
        year: today.getFullYear(),
    };
}


const EventCalendar = (/*no props yet*/)=> {

const [today, setToday] = useState(createToday());
const calendar = new Calendar({siblingMonths: true, });

const renderCalendarDays = () => getDaysWithEvents().map((day, index) => {
        const isToday = Calendar.interval(day, today) === 1;
        return (
            <CalendarDay 
                day={day} 
                isToday={isToday} 

                />
            );
        });
    }

    return (
        <div className="flexContainer">
            {renderCalendarDays()}
        </div>
    );
}