Challening parts
currentIndex needs to be the index of a patient from medicalRecords. It is being passed onto both Search and Records components. Plays a crucial role. Essentially this exercise is about connecting all components by state, or passing the state. We have to pass the state because the change of the state happens in the components not in the main MedicalRecordsSearch component.
Records is the more complicated component imo. I had challenges with the Next button in it, which is supposed to get records from the next patient in line. Moving between indexes and patient ids and records within records gets confusing at times.
Things I learned here
currentIndex value in the state, declared in function MedicalRecordsSearch holds an index of one of the three pateints available from medicalRecords.tsx file. Index is the main state in this whole mechanism! setCurrentIndex is passed onto component Search, along with the medicalRecords.tsx, in the form of patients state.
Search component consists of a select element (where you select a patient from the list) and a show button. I have a selected state to select patients in the dropdown. The show button does the following on click: if no patient has been selected, nothing will happen. However, if there is something selected, the current patient being looked is changed, via putting the selected value in the currentIndex state.
Records component relies on currentIndex state. If nothing is selected in the dropdown (meaning index stays null), no records are displayed. Otherwise, records are displayed based on the currentIndex state. Next button changes the state of currentIndex to next patient in line.