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?

westandy · Accepted Answer · 2020-05-27 15:30:58Z

2

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>
    );
}

edited May 27, 2020 at 15:30

answered Apr 8, 2020 at 15:40

westandy

1,5013 gold badges19 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

The Dead Man Over a year ago

Hi West Now I am getting this error : TypeError: Cannot read property 'year' of undefined

westandy Over a year ago

I'm not sure what your code looks like at this point. Maybe focus on the useState part, get rid of everything else, and just render <>{today}</> to make sure that much is working. Just a suggestion to start small.

The Dead Man Over a year ago

now I get this the following error : × ReferenceError: Cannot access 'createToday' before initialization

westandy Over a year ago

ha, yeah that would be true if you are defining useState before defining const createToday. Since createToday is independent of your React component, you could just define it above the React component definition. Then it will be there when you run the component.

westandy Over a year ago

I updated the answer to give you more of a working version.

Collectives™ on Stack Overflow

Refactoring class component to function component in react js

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related