Handling dropdown item select in React Bootstrap

Question

I'm iterating through a dict and displaying the keys in a react-bootstrap dropdown menu. This is my React dropdown Component,

class Dropdown extends React.Component
{
    constructor(props)
    {
        super(props);
        this.onTargetSelect = this.onTargetSelect.bind(this);
    }

    onTargetSelect(target)
    {
        console.log("Outputting from here: ", target);
        document.getElementById("dropdown-title").textContent(target);
        this.props.passTargetToParent(target);
    }

    render()
    {
        return(
        <SplitButton title="Select Target" id="dropdown-target">
            {Object.keys(dict).map(key => <MenuItem key={dict[key]} 
              href={`#${dict[key]}`} 
              onSelect={this.onTargetSelect(dict[key])}>{key}</MenuItem>)}
        </SplitButton>);
    }

}

There are two things that I'm trying to do here, which are proving difficult because of my limited knowledge of Javascript.

This displays all the values associated with the respective keys on load. That's not the behavior I want. I only want to console log the selected Item in the dropdown.
Second I want to change the title displayed currently as Select Target to the selected item in the dropdown.

Jeff McCloud · Accepted Answer · 2016-11-25 20:52:17Z

6

Change to this:

onSelect={() => this.onTargetSelect(dict[key])}

...what you have above is executing this.onTargetSelect() immediately during the render process, and thus once for each item in your list. You need to supply a handler (function) for onSelect, and that handler should call this.onTargetSelect() inside of it. The "() =>" syntax is creating a new function.

To change the title, you should not use the DOM as your are doing. In React, you modify state or props to cause a re-rendering of your component. Full code below using .state/.setState() (not tested, just copy/pasted from yours and tweaked):

class Dropdown extends React.Component {

  constructor(props) {
    super(props);
    this.onTargetSelect = this.onTargetSelect.bind(this);

    this.state = { title: 'Select Target' };
  }

  onTargetSelect(target) {
    this.setState({ title: target });

    this.props.passTargetToParent(target);
  }

  render() {
    return (
      <SplitButton title={this.state.title} id="dropdown-target">
        {Object.keys(dict).map(key => <MenuItem key={dict[key]} href={`#${dict[key]}`} onSelect={() => this.onTargetSelect(dict[key]) }>{key}</MenuItem>) }
      </SplitButton>
    );
  }

}

edited Nov 25, 2016 at 20:52

answered Nov 25, 2016 at 20:29

Jeff McCloud

5,9771 gold badge22 silver badges21 bronze badges

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

4 Comments

user6761897 Over a year ago

When I add that, this is the error that I get, I've no idea how,

Failed propType: The prop id is required to make Dropdown accessible for users of assistive technologies such as screen readers. Check the render method of Uncontrolled(Dropdown)

user6761897 Over a year ago

Also how do I handle changing the title, really appreciate the help. I've modified the question to add my logic to handling title change which obviously is not working.

Jeff McCloud Over a year ago

I edited my answer with more help RE: changing the title.

user6761897 Over a year ago

Worked like a charm.

Collectives™ on Stack Overflow

Handling dropdown item select in React Bootstrap

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related