Submenu guidence-Where to start?

JavaScript
1

I am new to FCC and plan go through the JS and React cirriculums to help with a website I’m building. Question: Can you point me in the direction of which cirrculum/projects would be best to learn help me build this submenu? ( There is no HTML, just trying to get subitems to populate under submenu).

export default function ArtistsFilter() {
const subitemAJ = [“Anthony”, “Billy”, “Conner”];
const subitemKQ = [“Katrina”, “Nancy”,“Mary”];
const subitemRZ = [“Roshada”, “Timmy”,“Sal”];
const orderedList = [“Artist”]
const mainList = [“A - J”, “K - Q”, “R-Z”];

    const [isOpen, setIsOpen] = useState(-1);
    const handleMouseEnter = (index:number) => setIsOpen(index);
    const handleMouseLeave = () => setIsOpen(-1);
    const handleClick = (index:number) => setIsOpen(isOpen === index ? -1 : index);
  return (
      <div>
        <ul> 
        
              {orderedList.map((item, index) => (
                    
                    <li key={index} 
                          onMouseEnter={() => handleMouseEnter(index)} 
                          onMouseLeave={handleMouseLeave}
                          onClick={() => handleClick(index)}>
                          {item}
                          {isOpen === index && orderedList[index] 
                          && (
                                <ul>
                                      {mainList.map((sublist) => (
                                      <li key={index}
                                            onMouseEnter={() => handleMouseEnter(index)} 
                                            onMouseLeave={handleMouseLeave}
                                            onClick={() => handleClick(index)}>
                                            {sublist}
                                      </li>))}
                                            
                                </ul>
                          )}
                          
                    </li>
              ))}
                                      
        </ul>
      </div>
    );
  };
2

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.