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

2 Answers 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>