CODEWITHSUNDEEP
javascriptreactjs
martoedge97
martoedge97

Reputation: 23

Passing an object prop to a React component in a mapping

this might be a very stupid question but im using this Nav Bar for Chakra UI i found and im struggling to understand how to use it.

This is the array and the NavLink component that I use to map the array of links.

const Links = ['Dashboard', 'Projects', 'Team'];

const NavLink = ({ children }: { children: ReactNode }) => (
  <Link
    px={2}
    py={1}
    rounded={'md'}
    _hover={{
      textDecoration: 'none',
      bg: useColorModeValue('gray.200', 'gray.700'),
    }}
    href={'#'}>
    {children}
  </Link>
);

How am i supposed to pass the href to the mapping

Links.map((link) => (
                <NavLink key={link}>{link}</NavLink>

I tried using an object with props name and href , but i have no idea how to pass the href prop to NavLink.

Help please!

Upvotes: 2

Views: 577

Answers (3)

user15498557
user15498557

Reputation: 127

These answers got me most of the way there. But unless I missed something, I don't like that it capitalizes the pages like /Dashboard, because pages (at least in next.js) are lowercase.

This is what I ended up doing to achieve both having a custom name and link.

const Links = [
  {
    name: "Home",
    href: "/",
  },
  {
    name: "Projects",
    href: "/projects",
  },
  {
    name: "About",
    href: "/about",
  },
];

Same NavLink as above

const NavLink = ({ children, href }: { children: React.ReactNode; href: string }) => (
  <Link
    px={2}
    py={1}
    rounded={"md"}
    _hover={{
      textDecoration: "none",
      bg: useColorModeValue("gray.200", "gray.700"),
    }}
    href={href}>
    {children}
  </Link>
);

Finally map over it all.

{Links.map((link) => (
  <NavLink key={link.name} href={link.href}>
    {link.name}
  </NavLink>
))}

Not sure if it's what they intended, but in my short term testing it works for me. Hope it helps someone in the future.

Upvotes: 0

Majid M.
Majid M.

Reputation: 4954

You can add href to NavLink props and use it to render Links with href:

import * as React from "react";
import { Link, useColorModeValue } from "@chakra-ui/react";

const Links = ["Dashboard", "Projects", "Team"];

const NavLink = ({
  children,
  href
}: {
  children: React.ReactNode;
  href: string;
}) => (
  <Link
    px={2}
    py={1}
    rounded={"md"}
    _hover={{
      textDecoration: "none",
      bg: useColorModeValue("gray.200", "gray.700")
    }}
    href={href}
  >
    {children}
  </Link>
);

export default function App() {
  return Links.map((link,i) => (
    <NavLink key={i} href={link}>
      {link}
    </NavLink>
  ));
}

Here's the example: https://codesandbox.io/s/quizzical-feather-q0jd0

Upvotes: 0

Dennis Vash
Dennis Vash

Reputation: 53874

I guess your links are tags:

const links = ["Dashboard", "Projects", "Team"];

const NavLink = ({ children, href }: { children: ReactNode, href: string }) => (
  <Link href={href}>{children}</Link>
);

links.map((link) => (
  <NavLink key={link} href={`#${link}`}>
    {link}
  </NavLink>
));

Upvotes: 1

Related Questions