I am trying to change the displayed text/title in the DropdownButton upon clicking on a Dropdown.Item.

I've tried to pass various parameters into the changeValue method/function but to no solution as of yet. Using this approach, text the parameter in the function appears to be empty. Therefore the state property, dropDownValue is being empty, thus leaving me with no title in the drop down after click on an item.

import React from 'react';
import './App.css';
import DropdownButton from 'react-bootstrap/DropdownButton';
import Dropdown from 'react-bootstrap/Dropdown';

class App extends React.Component {
  constructor() {
    super();

    this.state = {
      dropDownValue: "Select an item"
    }
  }

  changeValue(text) {
    this.setState({dropDownValue: text})
  }

  render() {
    return (
      <div className="App">
        <header className="App-header">
        </header>
        <div>
        <DropdownButton id="dropdown-item-button" title={this.state.dropDownValue} className="format"> 
          <Dropdown.Item as="button"><div onClick={() => this.changeValue(this.textContent)}>Item #1</div></Dropdown.Item>
          <Dropdown.Item as="button"><div onClick={() => this.changeValue(this.textContent)}>Item #2</div></Dropdown.Item>
          <Dropdown.Item as="button"><div onClick={() => this.changeValue(this.textContent)}>Item #3</div></Dropdown.Item>
        </DropdownButton>
        </div>
      </div>
    );
  }
}

export default App;

I am trying to change the displayed text/title in the DropdownButton upon clicking on a Dropdown.Item.

I've tried to pass various parameters into the changeValue method/function but to no solution as of yet. Using this approach, text the parameter in the function appears to be empty. Therefore the state property, dropDownValue is being empty, thus leaving me with no title in the drop down after click on an item.

import React from 'react';
import './App.css';
import DropdownButton from 'react-bootstrap/DropdownButton';
import Dropdown from 'react-bootstrap/Dropdown';

class App extends React.Component {
  constructor() {
    super();

    this.state = {
      dropDownValue: "Select an item"
    }
  }

  changeValue(text) {
    this.setState({dropDownValue: text})
  }

  render() {
    return (
      <div className="App">
        <header className="App-header">
        </header>
        <div>
        <DropdownButton id="dropdown-item-button" title={this.state.dropDownValue} className="format"> 
          <Dropdown.Item as="button"><div onClick={() => this.changeValue(this.textContent)}>Item #1</div></Dropdown.Item>
          <Dropdown.Item as="button"><div onClick={() => this.changeValue(this.textContent)}>Item #2</div></Dropdown.Item>
          <Dropdown.Item as="button"><div onClick={() => this.changeValue(this.textContent)}>Item #3</div></Dropdown.Item>
        </DropdownButton>
        </div>
      </div>
    );
  }
}

export default App;

• javascript
• reactjs
• drop-down-menu
• react-bootstrap

Share Improve this question Follow asked May 31, 2019 at 3:15 MisterTamsMisterTams 9522 silver badges1111 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

Just change this,

<Dropdown.Item as="button"><div onClick={() => this.changeValue(this.textContent)}>Item #1</div></Dropdown.Item>

with this,

<Dropdown.Item as="button"><div onClick={(e) => this.changeValue(e.target.textContent)}>Item #1</div></Dropdown.Item>

I just did this and it worked for me

<Dropdown.Item onClick={() => this.changeValue(e)}> Title </Dropdown.Item>