Question 296774 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Trying to pass props in React using React Router – saying the value is null

I am trying to pass props in order to use the React Router as part of a project I am in. I keep getting the error from this code that links is null, and I am not sure why –

Header component:
[![header][1]][1] 

export default function Nav({ links }) {
  return (
    <nav className="navbar navbar-expand-lg bg-secondary">
      <div className="container-fluid">
        <div className="collapse navbar-collapse" id="navbarSupportedContent">
          <ul className="navbar-nav me-auto mb-2 mb-lg-0">
          {links.map((link, index) => (
          <li key={index}>{link}</li>
        ))}
          </ul>
        </div>
      </div>
    </nav>
  );
}

Navigation Component:

[![nav][2]][2]

// Bringing in the required import from 'react-router-dom'
import { Link } from 'react-router-dom';
import Header from './Header';

export default function Nav() {
  // The Navbar UI component will render each of the Link elements in the links prop
  return (
    <Header
      links={[
        <Link key={1} className="nav-link text-light" to="/about">
          Home
        </Link>,
        <Link key={2} className="nav-link text-light" to="/contact">
          About Us
        </Link>,
        <Link key={3} className="nav-link text-light" to="/portfolio">
        Portfolio
      </Link>,
      <Link key={4} className="nav-link text-light" to="/resume">
      Portfolio
    </Link>,
      ]}
    />
  );
}

Error message I am receiving:

[![error][3]][3]

TypeError: Cannot read properties of undefined (reading 'map')
    at Nav (http://127.0.0.1:3000/src/components/Header.jsx?t=1701476841986:18:379)
    at renderWithHooks (http://127.0.0.1:3000/node_modules/.vite/deps/chunk-MMW4JUSU.js?v=39b7b9ed:12169:26)
    at mountIndeterminateComponent (http://127.0.0.1:3000/node_modules/.vite/deps/chunk-MMW4JUSU.js?v=39b7b9ed:14919:21)
    at beginWork (http://127.0.0.1:3000/node_modules/.vite/deps/chunk-MMW4JUSU.js?v=39b7b9ed:15900:22)
    at beginWork$1 (http://127.0.0.1:3000/node_modules/.vite/deps/chunk-MMW4JUSU.js?v=39b7b9ed:19747:22)
    at performUnitOfWork (http://127.0.0.1:3000/node_modules/.vite/deps/chunk-MMW4JUSU.js?v=39b7b9ed:19192:20)
    at workLoopSync (http://127.0.0.1:3000/node_modules/.vite/deps/chunk-MMW4JUSU.js?v=39b7b9ed:19131:13)
    at renderRootSync (http://127.0.0.1:3000/node_modules/.vite/deps/chunk-MMW4JUSU.js?v=39b7b9ed:19110:15)
    at recoverFromConcurrentError (http://127.0.0.1:3000/node_modules/.vite/deps/chunk-MMW4JUSU.js?v=39b7b9ed:18730:28)
    at performConcurrentWorkOnRoot (http://127.0.0.1:3000/node_modules/.vite/deps/chunk-MMW4JUSU.js?v=39b7b9ed:18678:30)

Any help would be greatly appreciated. Thank you!!

I have used ChatGPT extensively and cannot figure out this issue

  [1]: https://i.stack.imgur.com/bwZRi.png
  [2]: https://i.stack.imgur.com/YeJVh.png
  [3]: https://i.stack.imgur.com/8TlNg.png
Tags:

2

Answers


  1. 0

    Personally I would not be passing the JSX as array values in a property the way you are. Recognize that JSX is really just a short-hand to calling functions (components) while providing context for the parents and children around those components. The way you have the links parameter, it is passing elements that are the result of nested function calls not in a place where React is expecting those functions (components) to be called.

    The way I’d approach this would be:

    <Header
  links={[
    {className: "nav-link text-light", to: "/about", label: "Home"},
    {className: "nav-link text-light", to: "/contact", label: "About Us"},
    {className: "nav-link text-light" to: "/portfolio", label: "Portfolio"},
    {className: "nav-link text-light", to: "/resume", label: "Resume"}
  ]}
/>

    and then:

    export default function Nav({ links }) {
  return (
    <nav className="navbar navbar-expand-lg bg-secondary">
      <div className="container-fluid">
        <div className="collapse navbar-collapse" id="navbarSupportedContent">
          <ul className="navbar-nav me-auto mb-2 mb-lg-0">
            {links.map((link, index) => (
              <li key={index}>
                <Link className={link.className} to={link.to}>
                  {link.label}
                </Link>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </nav>
  );
}
    Login or Signup to reply.
  2. 0

    I couldn’t figure out cause of issue, rewrote from scratch, it worked.

    Navbar.js

    import React from "react";
import { BrowserRouter as Router } from "react-router-dom";
import { Link } from "react-router-dom";
import "./styles.css";
const Header = ({ links }) => {
  return (
    <header>
      <nav>
        <ul>
          {links.map((link, index) => (
            <li key={index}>{link}</li>
          ))}
        </ul>
      </nav>
    </header>
  );
};

const Navbar = () => {
  const headerLinks = [
    <Link key={1} className="nav-link text-light" to="/home">
      Home
    </Link>,
    <Link key={2} className="nav-link text-light" to="/about-us">
      About Us
    </Link>,
    <Link key={3} className="nav-link text-light" to="/portfolio">
      Portfolio
    </Link>,
    <Link key={4} className="nav-link text-light" to="/resume">
      Resume
    </Link>,
  ];

  return (
    <Router>
      <Header links={headerLinks} />
    </Router>
  );
};

export default Navbar;

    styles.css

    header {
  background-color: #333;
  padding: 10px 0;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

nav li {
  margin-right: 15px;
}

.nav-link {
  text-decoration: none;
  color: #fff;
  font-weight: bold;
}

.nav-link:hover {
  color: #ffd700;
}

    If you wanna play around with code

    Use preview link of codesanbox on your browser to view routing.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search