Menu

Event Handling & Controlled Components

Event Handling & Controlled Components

A. Event handling is how the app responds to user actions — clicks, typing, selecting. onClick applies to a job, toggles the description, opens/closes modals, and deletes a job; onChange updates every form field and the search bar as you type; onSubmit handles both the Apply form and the Job Form when the admin posts or edits job listings.

Inside JobCard, clicking the "Apply Now" button uses e.stopPropagation() so that the click doesn't also trigger the card's own toggle behaviour — a small but important use of event propagation control that keeps two separate click actions on the same card from interfering with each other. After a successful application, a setTimeout is used to automatically hide the success toast a few seconds later.

B. Controlled components are form elements whose value is fully managed by React state rather than the browser.

Every input in ApplyModal and JobForm is a controlled component—each field's value comes directly from state and only changes through its onChange handler, which also makes manual validation possible before allowing a submit to go through.