App.js

import React from 'react'
import './styles.css'

function Navbar({
  items,
  selectedItem: selectedItemProp,
  onSelect: onSelectProp = () => {},
}) {
  const { current: isControlled } = React.useRef(selectedItemProp !== undefined)
  const [selectedItem, setSelectedItem] = React.useState(
    isControlled ? selectedItemProp : '/home',
  )
  
  function onClick(value) {
    return (e) => {
      if (isControlled) {
        onSelectProp(value, e)
      } else {
        setSelectedItem(value)
      }
    }
  }
  
  const selectedItemResult = isControlled ? selectedItemProp : selectedItem
  
  return (
    <ul>
      {items.map((item) => (
        <li
          key={item.to}
          onClick={onClick(item.to)}
          style={{
            listStyle: 'none',
            display: 'inline-block',
            marginRight: 15,
            color: selectedItemResult === item.to ? 'purple' : undefined,
          }}
        >
          {item.label}
        </li>
      ))}
    </ul>
  )
}

function App() {
  const [selectedItem, setSelectedItem] = React.useState('/home')
  const items = [
    { to: '/home', label: 'Home' },
    { to: '/blog', label: 'Blog' },
    { to: '/about', label: 'About' },
    { to: '/contact', label: 'Contact' },
  ]
  
  return (
    <div>
      <Navbar
        items={items}
        selectedItem={selectedItem}
        onSelect={setSelectedItem}
      />
    </div>
  )
}
export default App