- Users can dynamically select any course as long as the total credit hours do not exceed 20 hours.
- The application prevents users from adding more than 20 hours of credit.
- Users cannot select the same course twice or multiple times.
- The application ensures that duplicate selections are ignored.
- The application automatically calculates and displays the total cost of the selected courses.
- The total cost is displayed in the appropriate currency format.
In this project, I manage the application's state using React's useState
hook. Here's a brief overview of how I handle state:
- I use the
courses
state variable to hold data fetched from the 'data.json' file. - The
useEffect
hook fetches and updates this state when the component mounts.
- The
selectedCourses
state variable keeps track of user-selected courses. - When a user selects a course, code update this state accordingly.
- I use
totalCredit
to store the cumulative total of credit hours for selected courses.
remainingCredit
tracks the remaining credit hours based on the total and selected courses.
totalPrices
stores the cumulative total price of selected courses.
By utilizing these state variables, our React project effectively manages dynamic data related to selected courses, their credit hours, remaining credit hours, and total prices, ensuring a responsive and interactive user experience.