From the course: Master React 19 and Next.js 16 with Hands-On Projects and Real-World Applications

Unlock this course with a free trial

Join today to access over 25,200 courses taught by industry experts.

Build the footer

Build the footer

From the course: Master React 19 and Next.js 16 with Hands-On Projects and Real-World Applications

Start my 1-month free trial Buy for my team

Build the footer

“

In this session, you will build a fantastic footer component for your React app. You'll create a footer that dynamically displays whether your agency is open or closed along with relevant contact information. Get ready to learn some neat React tricks! The rental agency opens during weekdays between 9am and 17pm. If the current time is outside opening hours, we will show a footer telling the client that we are closed and display opening hours. If the current time is within opening hours, we will show a footer telling the client that we are open and display the phone number. We currently have the footer rendered inside the app component, but it is empty. Moving to footer.jsx Let's define the opening and closing hours of our agency. Now I am adding the current date and time. I'm using the date object to obtain the current date and time. This is fundamental for determining if the agency is currently open. Okay, let's extract the current hour. The Get Hours method of the Date object gives…

Contents