Build a Responsive Navbar with Active Link

React

JavaScript

Technical Specification

Create a navbar with multiple links and highlight the active one based on current state.

Input/Output Samples

Input:Click 'Projects'

Output:'Projects' looks active

Optimal Logic Path

import { useState } from "react";

const LINKS = ["Home", "Projects", "Tutorials", "Contact"];

function NavbarSimple() {
  const [active, setActive] = useState("Home");

  return (
    <nav>
      {LINKS.map((link) => (
        <button
          key={link}
          onClick={() => setActive(link)}
          style={{
            fontWeight: active === link ? "bold" : "normal"
          }}
        >
          {link}
        </button>
      ))}
    </nav>
  );
}

Architectural Deep-Dive

We track which link is active in state and style it differently.