Reminder App

I set out to recreate the project that got me my internship role at SkillsForge Community. The project was to create a reminder app with functionalities like a title, description, date, and time. I developed my app with JavaScript then but my goal here was to achieve the same thing using ReactJS.

I aimed to use what I’ve learned in React to achieve the task — things such as React Hooks and using APIs. I used the Context API to keep track of all my states across the app. This article will highlight the bugs and issues I encountered while creating the app as well as my key takeaways.

Bug 1

After creating my context file, I got the error: “setName is not a function”. setName is a function I used in my Onboarding section to get the user’s name and display it on the next page.

As I tried to solve the issue, I saw that the error was popping up because the function was not properly defined in my context provider. I also failed to wrap my components in my App.js file with my provider and therefore my components had no access to the context file.

Context file

Onboarding Page

Key Takeaways

• Don’t pass components directly into the global state. Use the ‘children’ prop instead.
• Make sure to add a Provider to the context and wrap all components ith it. By doing this, all the components wrapped by the Provider will have acces to the functions and state provided by the context.

Bug 2
I added the functionality in my global state that if the above validations pass, the user can be navigated to the ShowReminders page. I used the useNavigate hook from the react-router-dom to navigate the user to a new page. I got the error that “useNavigate may only be used in the context of a Router component”.

I corrected this by ensuring my global provider was wrapped with the router component and not the provider wrapping the router as I was doing. This ensured that all components within the global provider had access to the react-router-dom and all its functionalities.

App.js with the Router wrapping the Global Provider

Key Takeaways

• useNavigate is a hook under the react-router-dom so it must be in a Router component to be functional.

Bug 3
I repeatedly got multiple reminders on the same form submission. This was because I was referencing my form data directly in my showReminders component and not the data stored in my server. I corrected this by directly referencing my data from my server.

Reminder list showing duplicates

ShowReminders component

Corrected ShowReminders component

Issues
This was the reminder functionality. I had to think of a way to keep adding information to the reminders since I had to keep displaying them. The first thing I did was declare my states in my context file. Then I passed them into my AddReminder component and destructured them. By doing this, all my inputs were stored in their respective state.
Next I made sure all my inputs were being added to my reminders API . I created a custom UseFetch hook. I used this hook to add inputs to my API and I also used it to as the name implies, fetch the inputs and display them in my ShowReminders component.

Global State

Destructuring in the AddReminder component

UseFetch Hook

I added functionalities in my global state to ensure none of the fields were empty and the date and time inputted must not be in the past.

Form Validation

Key Takeaways

• Ensure none of the fields are empty and that the date and time inputted are not in the past.
• Use a custom hook to manage API interactions for adding and fetching reminders.

Conclusion

In conclusion, I was able to use several React features I have learned over the last few weeks. I am eager to add more features such as:

• Better UI/UX
• Better error handling
• Better form validation to enhance user experience.