How to send specific item with onClick function in a subMenu in reactjs?

Question

I am using this react-sidenav (https://github.com/wmira/react-sidenav) to create a side nav with multiple options. This is my code using the nav:

nav.jsx

import React from 'react';
import SideNav from "react-sidenav";
var TeamActions = require('../actions/TeamActions');



export default class Nav extends React.Component {
            pushName (name) {
                TeamActions.setTeamName(name);
            }

            render() {


                return( <SideNav.Menu path="#" itemHeight="32px" styles={{margin: "0"}}  onClick={this.pushName.bind(null, key)}>
                            <SideNav.MenuItem itemKey="Boston Celtics"  >
                                <SideNav.ILeftItem className="fa fa-truck" >
                                    Boston Celtics
                                </SideNav.ILeftItem>
                            </SideNav.MenuItem>
                            <SideNav.MenuItem itemKey="bed">
                                <SideNav.ILeftItem className="fa fa-bed">
                                    Dallas Mavericks
                                </SideNav.ILeftItem>
                            </SideNav.MenuItem>


                </SideNav.Menu>
                )
            }
}

How can I use the onClick method to send the name (e.g "Boston Celtics") of the item being pressed? Currently onClick can be used in the place it is now as far as I've tried.

Added the react/sidenav.js file: https://github.com/wmira/react-sidenav/blob/master/js/react-sidenav.js

Edit: So I switched to (https://github.com/balloob/react-sidebar)'s sidebar which was more conducive to adding a onClick function through Jim's method.

usually an onclick on a higher level works on select (dropdown) because it has the item highlighted. You might want to have a onclick on each child and have refs to help you determine which one is clicked. please post the sidenav.js — Jim
– Jim, Commented Aug 27, 2015 at 1:27
@Jim when I place the onClick on the child it doesn't get triggered. (added the file) — Username
– Username, Commented Aug 27, 2015 at 2:22

Jim · Accepted Answer · 2015-08-27 03:23:34Z

1

it seems like you're using ul, li, a to build your content. here's the direction to help you with

var items = ['banana', 'applea'];

var List = React.createClass({

  _handleClick: function(e) {
    alert(e.target.id);
  },

  _renderItems: function() {

    var content = items.map(function(item) {
      return (
        <li key={item} id={item} onClick={this._handleClick}>{item}</li>
      );
    }.bind(this));

    return content;

  },

  render: function() {
    var content = this._renderItems();
    return (
      <ul>
        {content}
      </ul>
    );
  }
});


React.render(
  <List />,
  document.getElementById('app')
);

here's the jsbin link: http://jsbin.com/foxoxetana/edit?js,console,output

answered Aug 27, 2015 at 3:23

Jim

1,14113 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to send specific item with onClick function in a subMenu in reactjs?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related