1

I am trying to convert existing jquery to react js. I am really new to the react and I am learning, so please bare with if I am asking silly question

I have structure like this 

<ul>
    <li><a href="#">Home</a></li>
    <li><a href="http://example.com">About</a>
        <ul>
            <li><a href="#">School</a>
                <ul>
                    <li><a href="#">Lidership</a></li>
                    <li><a href="#">History</a></li>
                    <li><a href="#">Locations</a></li>
                    <li><a href="#">Careers</a></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

I want add class li has ul, I used to do it in jquery as

$('.menu > ul > li:has( > ul)').addClass('menu-dropdown-icon')

How can I do this same in react, I am using node-sass for css in react

my react class

import * as React from 'react'

import styles from './megaMenu.module.scss'

class megaMenu extends React.Component {
  public render() {
    return (
      <div className={styles.MegaMenu}>
        <div className={styles["menu-container"]}>
          <div className={styles.menu}>
            <ul>
              <li><a href="#">Home</a></li>
              <li><a href="http://marioloncarek.com">About</a>
                <ul>
                  <li><a href="#">School</a>
                    <ul>
                      <li><a href="#">Lidership</a></li>
                      <li><a href="#">History</a></li>
                      <li><a href="#">Locations</a></li>
                      <li><a href="#">Careers</a></li>
                    </ul>
                  </li>
                  <li><a href="#">Study</a>
                    <ul>
                      <li><a href="#">Undergraduate</a></li>
                      <li><a href="#">Masters</a></li>
                      <li><a href="#">International</a></li>
                      <li><a href="#">Online</a></li>
                    </ul>
                  </li>
                  <li><a href="#">Research</a>
                    <ul>
                      <li><a href="#">Undergraduate research</a></li>
                      <li><a href="#">Masters research</a></li>
                      <li><a href="#">Funding</a></li>
                    </ul>
                  </li>
                  <li><a href="#">Something</a>
                    <ul>
                      <li><a href="#">Sub something</a></li>
                      <li><a href="#">Sub something</a></li>
                      <li><a href="#">Sub something</a></li>
                      <li><a href="#">Sub something</a></li>
                    </ul>
                  </li>
                </ul>
              </li>
              <li><a href="#">News</a>
                <ul>
                  <li><a href="#">Today</a></li>
                  <li><a href="#">Calendar</a></li>
                  <li><a href="#">Sport</a></li>
                </ul>
              </li>
              <li><a href="http://marioloncarek.com">Contact</a>
                <ul>
                  <li><a href="#">School</a>
                    <ul>
                      <li><a href="#">Lidership</a></li>
                      <li><a href="#">History</a></li>
                      <li><a href="#">Locations</a></li>
                      <li><a href="#">Careers</a></li>
                    </ul>
                  </li>
                  <li><a href="#">Study</a>
                    <ul>
                      <li><a href="#">Undergraduate</a></li>
                      <li><a href="#">Masters</a></li>
                      <li><a href="#">International</a></li>
                      <li><a href="#">Online</a></li>
                    </ul>
                  </li>
                  <li><a href="#">Study</a>
                    <ul>
                      <li><a href="#">Undergraduate</a></li>
                      <li><a href="#">Masters</a></li>
                      <li><a href="#">International</a></li>
                      <li><a href="#">Online</a></li>
                    </ul>
                  </li>
                  <li><a href="#">Empty sub</a></li>
                </ul>
              </li>
            </ul>
          </div>
        </div>
      </div>
    )
  }
}

export default megaMenu
Milind
  • 1,855
  • 5
  • 30
  • 71
  • 1
    Can you include a sample of the react component you have already? – Dacre Denny Dec 11 '19 at 09:23
  • 2
    React doesn't really *do* that. React doesn't have some bits of code where you give it a selector and it adds classes to that selector. In react, you essentially build the html with the data you have. – TKoL Dec 11 '19 at 09:25
  • in react, if you want an element to have a class, you use the `className` prop, eg `className="menu-dropdown-icon"` – TKoL Dec 11 '19 at 09:26
  • I understand that @TKoL but later on I will make this dynamic and add items from property. That is the reason I am looking for dynamic way – Milind Dec 11 '19 at 09:27
  • @Millind, that's fine, but the dynamic way will not resemble the dynamic way you do it in jquery. You will still have to use the `className` property, you'll just have to use it dynamically. – TKoL Dec 11 '19 at 09:29
  • Why putting an image instead of the real code? – Roko C. Buljan Dec 11 '19 at 09:30
  • @RokoC.Buljan it is huge code so I collapse and put needed code only – Milind Dec 11 '19 at 09:32
  • @RokoC.Buljan I have added real code – Milind Dec 11 '19 at 09:34
  • 1
    @Milind the reason you're not getting much help is that you're asking people to solve too many problems at once. You're asking them to (a) create your nested data structure for you, (b) create a way to recursively render your nested data structure, and (c) show you how to add a class to a React element conditionally. The way you've worded the question makes it seem like you're only asking (c), but to solve your specific use case here requires (a) and (b) also. – TKoL Dec 11 '19 at 10:11
  • [Here is a question about just doing conditional classnames](https://stackoverflow.com/questions/30533171/react-js-conditionally-applying-class-attributes), and I would also recommend you try [this package](https://www.npmjs.com/package/classnames) as an alternative. – TKoL Dec 11 '19 at 10:13
  • And [this](https://www.bitovi.com/blog/recursive-react-components) is a tutorial about recursive components that actually has a very similar structure to the list you want to make – TKoL Dec 11 '19 at 10:14
  • You make my day @TKoL I will check after some time I really appreciate your support – Milind Dec 11 '19 at 10:15

1 Answers1

2

Your example is rather complicated for a beginner test, because you talk about making it dynamically, but your test code isn't dynamic, you just have the html hardcoded in.

The reason it's complicated is that, if you want to make it dynamic, you'll have to create a nested data structure to represent your list, and you'll have to make a recursive component - a component which creates more of itself under certain conditions.

I've condensed your HTML into an example data structure below:

class MegaMenu extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            menuItems: [
                {
                    name: 'Home',
                    link: '#'
                },
                {
                    name: 'About',
                    link: 'http://marioloncarek.com',
                    menuItems: [
                        {
                            name: 'School',
                            link: '#'
                        },
                        {
                            name: 'Study',
                            link: '#'
                        },
                        {
                            name: 'History',
                            link: '#'
                        }
                    ]
                }
            ]
        }
    }

    render() {
        return (
            <div className="menu-items"}>{this.state.menuItems.map(menuItem => (<RecursiveComponentHere menuItem={menuItem} />))}</div>
            )
    }
}

And then you'd define your RecursiveComponentHere component to render your <li> based on the menuItem prop, and IF that prop has a menuItems property itself, conditionally change the className and render the menuItems inside of it, as RecursiveComponentHere elements themselves.

TKoL
  • 13,158
  • 3
  • 39
  • 73