React Bootstrap Dropdown Button OnSelect

Question

I am passing the option values into a series of Dropdown buttons, each of which is in a child component from a data array.

When an option is chosen in one of the buttons I am updating the state in the parent component with the result of onSelect. This is all working fine...

    //parent component

    sourceSelected = (event) => {
    this.setState({
       sourceSelected: event
    });

    ...

    <ButtonToolbar>
      {MEDIUM.map((medium) =>
        <Medium key={medium.medium_name} medium={medium} onSelectedValue{this.sourceSelected } />
      )};
    </ButtonToolbar>

    //child component
    <DropdownButton title={props.medium.medium_name} id="source-dropdown" onSelect={props.onSelectedValue}>
    {props.medium.source.map((option, index) =>
    <MenuItem key={index} eventKey={option}> {option} </MenuItem>)}
    </DropdownButton>

However, I would also like to store in the state (mediumSelected=???) the name of the button from which the option was selected.

Is there anyway to get OnSelect to pass this back or should I do something else?

No I'm not. I wanted to get this working before I went down that route — Nick Wild
– Nick Wild, Commented Oct 21, 2017 at 19:14
You want to store the name of the button or a value returned by the button ? — Aaqib
– Aaqib, Commented Oct 21, 2017 at 20:23
Thanks @Aaqib I already have got the value returned from the dropdowns, but also want to store in state the name of the button. Thanks — Nick Wild
– Nick Wild, Commented Oct 21, 2017 at 21:27

Nick Wild · Accepted Answer · 2017-10-22 11:53:14Z

1

OK, I answered this using... https://reactjs.org/docs/handling-events.html passing arguments to event handlers.

The code is:

    //parent component
     sourceSelected = ( medium_name, event) => {
     this.setState({
       sourceSelected: event,
      mediumSelected: medium_name
       });
     }
     ...

     <div className='test'>
      <ButtonToolbar>
          {MEDIUM.map((medium) =>
            <Medium key={medium.medium_name} medium={medium} onSelectedValue={this.sourceSelected.bind(this, medium.medium_name) } />
          )};
      </ButtonToolbar>

answered Oct 22, 2017 at 11:53

Nick Wild

5851 gold badge12 silver badges27 bronze badges

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

Comments

awareness481 · Accepted Answer · 2017-10-21 17:47:03Z

0

You can take advantage of Javascript events and this. Basically, pass the event to the function that will be using the button name, like this

<button name="btn" onClick={e => this.buttonName(e.target.name)}>

You will also need to bind this in your constructor()

Example code:

  constructor(props) {
    super(props);
    // Bind this so you can use it below
    this.buttonName = this.buttonName.bind(this);
  }

  buttonName(e) {
    console.log(e);
  }
  render() {
    return (
      <div>
        // Pass the name of the button to the function
        <button name="btn" onClick={e => this.buttonName(e.target.name)}>
          Button
        </button>
      </div>
    );
  }

I also threw a quick example on https://codesandbox.io/s/lrwqr303vz. Don't mind the file names.

answered Oct 21, 2017 at 17:47

awareness481

212 bronze badges

1 Comment

Nick Wild Over a year ago

Thanks for this. But it is not actually a button click I need as I am using the Select function from the dropdown. I just need it to pass the button name back up as part of the onSelect from the DropdownButton in the Child

Collectives™ on Stack Overflow

React Bootstrap Dropdown Button OnSelect

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related