How do I reuse a method to handle multiple, different refs in React?

Question

I am using jQuery for some UI manipulation on a React app. (I know, I know... :)

Why do I need to write different methods (which are identical in behavior) in order to toggle separate parts of my navigation bar?

First I tried to create and pass just one method to both click listeners bellow, only the first ref would toggle regardless of clicking on both elements listening for the click event.

Now, I have it working but rather with two diff methods doing the exact same thing.

That seems far from a DRY approach.

Am I missing something?

import React, { Component } from 'react';
import { findDOMNode } from 'react-dom';
import $ from 'jquery';

class Navigation extends Component {
  componentDidMount() {
    this.$el = $(this.el);
    this.$el.slideToggle();
  }

  componentWillUnmount() {
    this.$el.slideToggle('destroy');
  }

  //handle first dropdown
  portifolioDropdownToggle = () => {
    const el = findDOMNode(this.refs.ptoggle);
    $(el).slideToggle();
  }
  //handle second dropdown 
  servicesDropdownToggle = () => {
    const el = findDOMNode(this.refs.servtoggle);
    $(el).slideToggle();
  }

  render() {
    return (
          <div>
          <nav>
            <ul className="nav-list" >
              <li><a href="#!">Home</a></li>
              <li><a href="#!">About</a></li>
              {/* First Dropdown */}
              <li>
                <a href="#!" onClick={this.servicesDropdownToggle}>Services</a>
                <ul className="nav-dropdown" ref="servtoggle">
                  <li>
                    <a href="#!">Web Design</a>
                  </li>
                  <li>
                    <a href="#!">Web Development</a>
                  </li>
                </ul>
              </li>
              {/* Second Dropdown */}
              <li><a href="#!">Pricing</a></li>
              <li>
                <a href="#!" onClick={this.portifolioDropdownToggle}>Portfolio</a>
                <ul className="nav-dropdown" ref="ptoggle">
                  <li>
                    <a href="#!">Web Design</a>
                  </li>
                  <li>
                    <a href="#!">Web Development</a>
                  </li>
                </ul>
              </li>
            </ul>
          </nav>
        </div>
    )
  }

}

export default Navigation;

Answer 1

If you pass an identifier as an argument to the method then you can reuse it.

handleToggle = (thingToToggle) => {
    const el = findDOMNode(thingToToggle);
    $(el).slideToggle();
  }

Then in your render method, you can use it like so...

 <a href="#!" onClick={() => this.handleToggle(this.refs.ptoggle)}>Portfolio</a>

and reuse it like so...

<a href="#!" onClick={() => this.handleToggle(this.refs.servtoggle)}>Services</a>