CODEWITHSUNDEEP
javascriptreactjsnext.js
Aykc
Aykc

Reputation: 35

Reactjs dropdown menu and reusable components

I am following a tutorial to make a dropdown menu but I am stuck in the middle because instead of using the "props" keyword like The instructor did in the tutorial. I passed the props directly as arguments without props dot. When I wanted to implement {open && children} without props I got the Error that children are not defined

This is the tutorial I am following, And the minute when I get the Error https://youtu.be/IF6k0uZuypA?t=543

This is the NavItem.js component where I have the problem

import React, { useState, useEffect } from 'react';


function NavItem({ icon, title, ...props }) {
  const [opened, setOpened] = useState(false);

  return (
    <li className='nav-item'>
      
      <a
        href='#'
        target=''
        className='icon-button'
        onClick={() => setOpened(!open)}
      >
        
        {icon}
        <div>{title}</div>
      </a>
      {open && children}
      
    </li>
  );
}

export default NavItem;

This is the Navbar.js Component where I call NavItem.js component

import React from 'react';
import NavItem from './NavItem';
import BellIcon from './icons/bell.svg';
import { ReactComponent as MessengerIcon } from './icons/messenger.svg';
import { ReactComponent as CaretIcon } from './icons/caret.svg';
import { ReactComponent as PlusIcon } from './icons/plus.svg';
import { ReactComponent as ChevronIcon } from './icons/chevron.svg';

function Navbar() {
  return (
    <>
      <nav className='h-20 bg-[#242526] py-0 px-4   border-b border-[#474a4d] '>
        <ul className='max-w-full h-full flex justify-end'>
          <NavItem icon={<PlusIcon />} />
          <NavItem icon={<BellIcon />} />
          <NavItem icon={<MessengerIcon />} />
          <NavItem icon={<CaretIcon />}>
            {/* Here where to render The dropdown menu Items */}
          </NavItem>
        </ul>
      </nav>
    </>
  );
}

export default Navbar;

I am using Tailwindcss for styling Thank you for your help

Upvotes: 0

Views: 958

Answers (1)

ldruskis
ldruskis

Reputation: 799

You must either continue destruct props object:

({ icon, title, children, ...props })

Or access via props

{opened && props.children}

Upvotes: 2

Related Questions