Creating a Navigation Drop-down in React

Posted by Calvin on December 13, 2023 at 4:17 PM

Categories: react html

For an MVP I'm currently working on, the client wanted some of the top navigation menu items to have drop-downs containing other nagivation links. I'm sure there are many ways to implement this, but this is how I decided to do it:

• Create a NavDropdown component that takes dropdownItems props and maps them to NavLinks:
  

  NavDropdown component:

  import { NavLink } from 'react-router-dom';
  
  function NavDropdown({dropdownItems}) {
    return (
      <div className='nav-dropdown'>
        {
          dropdownItems.map(item => {
            return <NavLink className='nav-dropdown-item' to=`/${item}`>{item}</NavLink>
          })
        }
      </div>
    );
  }
  
  export default NavDropdown;

• Import the NavDropdown component into the NavBar component, and pass it the appropriate text.
• Use onMouseEnter and onMouseLeave events to set the hoveredItem state in the NavBar component, and conditionally render the NavDropdown component based on this state.
  
  NavBar component:
  

  import { useState } from 'react';
  import { NavLink } from 'react-router-dom';
  
  import NavDropdown from './NavDropdown';
  
  function NavBar() {
  
    const [hoveredItem, setHoveredItem] = useState('')
  
    return (
      <div id='navbar' className='relative mx-4 flex'>
        <NavLink className='top-nav-item' to='/'>Home</NavLink>
        <NavLink className='top-nav-item' onMouseEnter={() => setHoveredItem('about')} onMouseLeave={() => setHoveredItem('')} to='/about'>
          About
          {hoveredItem === 'about' &&
            <NavDropdown dropdownItems={['Link1', 'Link2', 'Link3']}/>
          }
        </NavLink>
        <NavLink className='top-nav-item' to='/signup'>SignUp</NavLink>
      </div>
    );
  }
  
  export default NavBar;

I still have a few things to clean up, but I'm pretty happy with how it functions, and thanks to conditional rendering I didn't have to use any CSS display property nonsense.

Recent developments

Posted by Calvin on September 07, 2022 at 2:44 PM

Categories: javascript react

It's been a while since I've made a blog post, as I've been incredibly busy the past few months, but I think I have some reasonable excuses:

• I'm now a married man! My wife Patt and I got married in June in Thailand (her home country), and I couldn't be happier. I got to spend 3 weeks visiting her family and friends and experiencing Thailand (mostly via Thailand's incredible food). Unfortunately, we both got covid while I was there, which put a bit of a damper on our celebration, but we made the most of it and had an amazing time.
• I was accepted into Hack Reactor's part-time Software Engineering boot camp and started my 9-month journey to increase my knowledge and experience as a full-stack software engineer, which I'm also super excited about. I graduate in April of 2023, so the next 8 months of my life or so will be mostly dedicated to classes and study. I'm already having a great time and learning a ton.

I'll post again soon with some updates related to my experience at Hack Reactor.

Another React Poker App Update

Posted by Calvin on May 18, 2022 at 3:35 PM

Categories: react poker

I made some good progress on the poker app the past couple of weeks, namely the ability to import hands via text string as well as a slider for adding/removing hands to the current displayed hand range:

I also added localStorage for saving a user's ranges locally. I haven't yet decided if I'm going to add a database and user registration, but I think I'll build out all the features I want first and then worry about the higher-level stuff.

React Poker App Update

Posted by Calvin on May 09, 2022 at 8:54 PM

Categories: react poker

I'm super excited that I was able to almost completely port my poker hand generator app to React from vanilla JavaScript over the past few days with some help from a more senior level dev friend. I have it about 90% complete, or at least as complete as it was in vanilla JavaScript and I'm learning a ton about React in the process.

My recent accomplishments:

• Got all of the buttons working as far switching the positions and situations the user wants to view. The toughest part was accounting for all the subSituations (for example: situation = "RFI vs 3B": you Raised First In and someone 3Bet, or re-raised you | position = "UTG": Under The Gun, or the person to the left of the Big Blind | subSituation = "vs UTG1": You are facing a re-raise from the person at UTG1, or 1 to the left of UTG)
• Created a second useState that contains only the current display of hands and actions (handState) - this allows the user to only save the actions to a specific scenario when they press the "Save" button. It also allows them to clear the handState.

Next steps:

• Duplicate the percentage calculations that update below the hand grid
• Allow the user to import or type in a string of hand ranges so the user doesn't have to click them all
• Save the data to localStorage and also to the local device, which would also allow the user to upload a file with saved stats so they don't lose them.

Looking forward to getting a live working version up.

Re-building the poker hand range generator in React

Posted by Calvin on May 03, 2022 at 5:56 PM

Categories: react poker

This past weekend one of my senior dev friends helped me get started in changing the poker range took I'm building (initially in vanilla JavaScript) over to React. As React is on my list of software-related tools that I want to get better at, I think this is a good opportunity to learn more about it while building the tool using a library that will allow more flexibility and functionality when I want to add things to the project in the future.