Building a Study Log App with React — Track Daily Study Topics and Hours

Tags: JavaScript, Beginners, Frontend, App Development, React

---

Introduction

Hello, and thanks for reading.

This was my first time developing a study log app using React.

In this post, I’ll share an overview of the app, the challenges I faced during development, the solutions I found, and what I learned along the way.

---

App Overview

GitHub Repository:

https://github.com/kazukashima/kadai1.git

This app allows you to log your daily study topics and study hours, then automatically calculates and displays the total study time.

Feature	Description
Study log entry	Add a study topic and study time via a form
Real-time reflection	See your input instantly on the screen
Total time display	Automatically sums all study hours
Input validation	Shows an error if fields are empty or default values
Error removal	Hides the error message when valid data is entered
Data persistence	Saves and loads data automatically via localStorage

---

Challenges and Solutions

1. Getting used to React shorthand syntax

   • Challenge: Confused by state updates and prop passing syntax.
   • Solution: Reviewed the official documentation and tutorials repeatedly until patterns became familiar.

2. Managing state and adding to arrays

   • Challenge: Values became undefined when adding to state arrays.
   • Solution: Reviewed how values were passed and ensured the array structure was correct.

3. Asynchronous state updates

   • Challenge: Values retrieved immediately after setState showed old data.
   • Solution: Used useEffect or callbacks to access updated values.

4. Type conversion in total time calculation

   • Challenge: "1" + "1" resulted in "11" instead of 2.
   • Solution: Used parseFloat or valueAsNumber to convert to numeric types.

5. Key management in list rendering

   • Challenge: Duplicate key warnings when rendering lists with .map().
   • Solution: Generated unique keys by combining the index with the title.

---

Growth Points

• Learned to use useState and useEffect for state management and side effects.
• Gained confidence with .map() for dynamic list rendering and ensuring unique keys.
• Became more comfortable with React component structure and JSX syntax.

---

Lessons Learned

• Hands-on coding accelerates understanding.
• Concepts that were vague in theory became concrete skills through implementation.
• Solving small problems one at a time builds momentum.
• Debugging issues like string concatenation or duplicate keys deepened my comprehension.
• Having a clear goal (“I want to build this”) makes it easier to stay focused and motivated.

---

Conclusion

This project strengthened not only my React and JavaScript basics but also my practical skills in error handling, data persistence, and incremental problem-solving.