Functional Components & State Management

Functional components are small building blocks of a web application. They allow you to create reusable components of a web page so you do not have to repeat the same code in multiple places, ensuring consistent results and easier maintenance.

A component maintains an account of modifications to data, including dates chosen or results of computations, through state management. A hook used in React is called useState. It records component values and automatically updates the UI when the state changes, making the app dynamic and interactive.

useState provides two things: the current state value and a function to update it, allowing the component to store and dynamically update data.

For example: const [state, setState] = useState(initialValue);

state → holds the current value.

setState → function to update the value dynamically.

const [dob, setDob] = useState(null);     // initial state value is set as null

Explanation:

In this project, a functional component called <AgeCalculator/> is created that contains all the app's JSX. Inside this component, the state dob is managed with useState to store the user’s selected date of birth and dynamically update the displayed age.