Exporting and importing components in React - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this React component import?

Given two files, Header.js and App.js, where Header.js exports a component as export default function Header() { return <h1>Welcome</h1>; } and App.js imports it as import Header from './Header'; and renders <Header />, what will be displayed on the page?

React

/* Header.js */
export default function Header() {
  return <h1>Welcome</h1>;
}

/* App.js */
import React from 'react';
import Header from './Header';

export default function App() {
  return (
    <div>
      <Header />
    </div>
  );
}

A The page shows the text 'Header' as plain text.

B The page shows nothing because the import is incorrect.

C The page shows a heading with the text 'Welcome'.

D The page shows an error because Header is not a named export.

💡 Hint

Check how the component is exported and imported using default export.

When a component is exported as default, it can be imported with any name without curly braces. Rendering

will display the returned JSX, which is an

with 'Welcome'.

📝 Syntax

intermediate

Which import statement correctly imports a named export?

If a React component is exported as export function Footer() { return <footer>Bye</footer>; }, which import statement correctly imports it in another file?

React

export function Footer() {
  return <footer>Bye</footer>;
}

A import { Footer } from './Footer';

B import Footer from './Footer';

C import * as Footer from './Footer';

D import Footer() from './Footer';

💡 Hint

Named exports require curly braces in import.

Named exports must be imported using curly braces with the exact exported name. Option A uses correct syntax.

🔧 Debug

advanced

Why does this import cause an error?

Given export default function Nav() { return <nav>Menu</nav>; } in Nav.js, why does import { Nav } from './Nav'; cause an error?

React

/* Nav.js */
export default function Nav() {
  return <nav>Menu</nav>;
}

/* Another file */
import { Nav } from './Nav';

export default function App() {
  return <Nav />;
}

A Because Nav component is missing a return statement.

B Because Nav is a default export but imported as a named export.

C Because the import path './Nav' is incorrect.

D Because React components cannot be default exported.

💡 Hint

Check the difference between default and named exports and imports.

Default exports must be imported without curly braces. Using curly braces tries to import a named export which does not exist, causing an error.

❓ state_output

advanced

What is the output when importing a component with a typo?

If a component is exported as export default function Sidebar() { return <aside>Links</aside>; } and imported as import SideBar from './Sidebar'; (note the uppercase B), what happens when rendering <SideBar />?

React

/* Sidebar.js */
export default function Sidebar() {
  return <aside>Links</aside>;
}

/* App.js */
import SideBar from './Sidebar';

export default function App() {
  return <SideBar />;
}

A The code throws a runtime error because SideBar is undefined.

B The component renders nothing because the import name is case-sensitive but matches the export.

C The component renders nothing because the import name does not match the export name exactly.

D The component renders correctly showing 'Links'.

💡 Hint

Default exports can be imported with any name regardless of case.

Default exports can be imported with any variable name, so the case difference in the import name does not affect rendering.

🧠 Conceptual

expert

Which statement about exporting and importing React components is true?

Consider these statements about exporting and importing React components. Which one is true?

A Named exports require curly braces when importing, and the imported name must match exactly.

B A component exported as default must be imported with the same name as the export function.

C You can import a default export using curly braces if you rename it.

D You cannot have both named and default exports in the same file.

💡 Hint

Think about how named exports and imports work in JavaScript modules.

Named exports must be imported with curly braces and the exact exported name. Default exports can be imported with any name without braces.

Practice

1. What is the main reason to export a React component from a file?

easy

A. To make the component run faster

B. To hide the component from other files

C. To use the component in other files by importing it

D. To automatically style the component

Solution

1. Step 1: Understand the purpose of export

   Exporting a component allows it to be shared and used in other files.

2. Step 2: Connect export with import usage

   Without export, other files cannot import and use the component.

3. Final Answer:

   To use the component in other files by importing it -> Option C

4. Quick Check:

   Export shares components [OK]

Hint: Export lets you share components between files [OK]

Common Mistakes:

• Thinking export improves speed
• Believing export hides components
• Assuming export adds styles automatically

2. Which of the following is the correct syntax to export a React component as the default export?

easy

A. export MyComponent = () => Hello;

B. export default function MyComponent() { return Hello; }

C. default export MyComponent() { return Hello; }

D. export function default MyComponent() { return Hello; }

Solution

1. Step 1: Recall default export syntax

   The correct syntax is 'export default' followed by the function declaration.

2. Step 2: Check each option's syntax

   export default function MyComponent() { return
   Hello; } matches the correct syntax; others have invalid order or keywords.

3. Final Answer:

   export default function MyComponent() { return <div>Hello</div>; } -> Option B

4. Quick Check:

   Default export uses 'export default' [OK]

Hint: Default export starts with 'export default' [OK]

Common Mistakes:

• Placing 'default' after function name
• Using '=' with export incorrectly
• Mixing 'export' and 'default' order

3. Given these two files, what will be the output when App is rendered?

// Button.js
export function Button() { return <button>Click</button>; }
// App.js
import { Button } from './Button';
export default function App() { return <div><Button /></div>; }

medium

A. <div><button>Click</button></div>

B. Error: Button not found

C. <button>Click</button>

D. <div>Button</div>

Solution

1. Step 1: Understand named export and import

   Button is exported as a named export and imported with curly braces correctly.

2. Step 2: Analyze rendering in App component

   App renders a div containing the Button component, which returns a button element with text 'Click'.

3. Final Answer:

   <div><button>Click</button></div> -> Option A

4. Quick Check:

   Named export/import works = output includes button inside div [OK]

Hint: Named exports import with braces { } [OK]

Common Mistakes:

• Importing named export without braces
• Expecting Button text instead of button element
• Confusing default and named exports

4. What is wrong with this import statement?

import Button from './Button';

Given that Button.js contains:
export function Button() { return <button>Click</button>; }

medium

A. Button is a named export but imported as default

B. The file path is incorrect

C. Button component is not exported at all

D. The import statement is missing curly braces

Solution

1. Step 1: Check export type in Button.js

   Button is exported as a named export using 'export function Button'.

2. Step 2: Compare with import syntax

   Importing without braces means default import, but Button is not default exported.

3. Final Answer:

   Button is a named export but imported as default -> Option A

4. Quick Check:

   Named export must import with braces [OK]

Hint: Named exports need braces in import [OK]

Common Mistakes:

• Importing named export without braces
• Assuming default export without checking
• Ignoring export type in source file

5. You have two components in Widgets.js:

export function WidgetA() { return <div>A</div>; }
export function WidgetB() { return <div>B</div>; }

How should you import both components in Dashboard.js to use them?

hard

A. import WidgetA from './Widgets'; import WidgetB from './Widgets';

B. import WidgetA, WidgetB from './Widgets';

C. import * as Widgets from './Widgets';

D. import { WidgetA, WidgetB } from './Widgets';

Solution

1. Step 1: Identify export type in Widgets.js

   Both WidgetA and WidgetB are named exports.

2. Step 2: Choose correct import syntax for multiple named exports

   Use curly braces with both names inside: import { WidgetA, WidgetB } from './Widgets';

3. Final Answer:

   import { WidgetA, WidgetB } from './Widgets'; -> Option D

4. Quick Check:

   Multiple named exports import with braces and commas [OK]

Hint: Import multiple named exports with { A, B } [OK]

Common Mistakes:

• Trying to import multiple named exports as default
• Using separate default imports for each named export
• Using import * without accessing properties