Trace the Component Boundaries

Open components/Converter.js, components/Chart.js, components/PopularCurrencies.js, and lib/currencies.js.

Notice that the project separates the converter UI, chart, popular-currency list, and currency data instead of placing everything inside the page component.

For the converter, the page owns the selected pair while the reusable component owns its local input/dropdown state.

Test it

Trace the from and to values from app/page.js into Converter.

Checkpoint

You can identify which values come from page state and which values belong to a component.