Navigation links in React - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this React navigation component?

Consider this React component that renders navigation links. What will be displayed in the browser?

React

import React from 'react';
import { Link } from 'react-router-dom';

export default function Nav() {
  return (
    <nav aria-label="Main navigation">
      <ul>
        <li><Link to="/home">Home</Link></li>
        <li><Link to="/about">About</Link></li>
        <li><Link to="/contact">Contact</Link></li>
      </ul>
    </nav>
  );
}

A A navigation bar with three clickable links labeled Home, About, and Contact.

B A navigation bar with three links but only Home and About are clickable; Contact is plain text.

C An error because Link components require an href attribute instead of to.

D Nothing renders because the component is missing a return statement.

💡 Hint

Remember that React Router's Link uses 'to' for navigation paths.

The component uses React Router's Link with 'to' attributes correctly. It renders a nav with three clickable links labeled Home, About, and Contact.

❓ state_output

intermediate

What is the active link after clicking?

This React component highlights the active navigation link. After clicking the About link, what is the value of the active state?

React

import React, { useState } from 'react';

export default function Nav() {
  const [active, setActive] = useState('Home');

  return (
    <nav aria-label="Main navigation">
      <ul>
        <li>
          <button onClick={() => setActive('Home')} aria-current={active === 'Home' ? 'page' : undefined}>Home</button>
        </li>
        <li>
          <button onClick={() => setActive('About')} aria-current={active === 'About' ? 'page' : undefined}>About</button>
        </li>
        <li>
          <button onClick={() => setActive('Contact')} aria-current={active === 'Contact' ? 'page' : undefined}>Contact</button>
        </li>
      </ul>
    </nav>
  );
}

A "Contact"

B "Home"

C "About"

D undefined

💡 Hint

Clicking the About button triggers setActive with 'About'.

The state 'active' starts as 'Home'. Clicking the About button calls setActive('About'), so active becomes 'About'.

📝 Syntax

advanced

Which option causes a syntax error in this React navigation code?

Identify which code snippet will cause a syntax error when used in a React component rendering navigation links.

React

function Nav() {
  return (
    <nav>
      <ul>
        <li><a href="/home">Home</a></li>
        <li><a href="/about">About</a></li>
        <li><a href="/contact">Contact</a></li>
      </ul>
    </nav>
  );
}

A return <nav><ul><li><a href="/home">Home</a></li><li><a href="/about">About</a></li><li><a href="/contact">Contact</a></li></ul></nav>;

B return (<nav><ul><li><a href="/home">Home</a><li><a href="/about">About</a></li><li><a href="/contact">Contact</a></li></ul></nav>);

C ;)>van/<>lu/<>il/<>a/<tcatnoC>"tcatnoc/"=ferh a<>il<>il/<>a/<tuobA>"tuoba/"=ferh a<>il<>il/<>a/<emoH>"emoh/"=ferh a<>il<>lu<>van<( nruter

D return (<nav><ul><li><a href="/home">Home</a></li><li><a href="/about">About</a></li><li><a href="/contact">Contact</a></li></ul></nav>);

💡 Hint

Check if all tags are properly closed.

Option B is missing a closing tag after the first element, causing a syntax error in JSX.

🔧 Debug

advanced

Why does this navigation component not update the active link?

This React component tries to highlight the active link but fails. What is the reason?

React

import React, { useState } from 'react';

export default function Nav() {
  let active = 'Home';

  return (
    <nav aria-label="Main navigation">
      <ul>
        <li>
          <button onClick={() => active = 'Home'} aria-current={active === 'Home' ? 'page' : undefined}>Home</button>
        </li>
        <li>
          <button onClick={() => active = 'About'} aria-current={active === 'About' ? 'page' : undefined}>About</button>
        </li>
        <li>
          <button onClick={() => active = 'Contact'} aria-current={active === 'Contact' ? 'page' : undefined}>Contact</button>
        </li>
      </ul>
    </nav>
  );
}

A The variable 'active' is not a state variable, so React does not re-render when it changes.

B The onClick handlers are missing parentheses, so they never run.

C The aria-current attribute is misspelled, so it does not update.

D The buttons should be anchor tags for navigation to work.

💡 Hint

React only re-renders when state or props change.

The variable 'active' is a plain variable. Changing it does not trigger React to re-render the component, so the UI does not update.

🧠 Conceptual

expert

Which option best describes the purpose of 'aria-current' in navigation links?

In accessible navigation components, what is the main role of the 'aria-current' attribute on links?

A It triggers a browser alert when the link is focused.

B It visually highlights the active link by changing its color automatically.

C It disables the link so users cannot click the current page link again.

D It informs assistive technologies which link represents the current page or section.

💡 Hint

Think about screen readers and accessibility.

'aria-current' is an accessibility attribute that tells screen readers which link is the current page, improving navigation clarity for users with disabilities.