Steps to Implement Dropdown with Multiple Selection in ReactJS

Question

Steps to Implement Dropdown with Multiple Selection in ReactJS

Recently, I've started exploring React and now I'm eager to create a customized select component similar to the one shown in this image: https://i.sstatic.net/D2IDC.png

I've successfully created a basic select element like this:

<select >
  <option value="volvo">Volvo</option>
</select>

However, I am facing a challenge when it comes to creating a dynamic select that fetches its values from an object within this.state. The structure of my state object is as follows:

state: { "first_one": "All accounts", "second_one": "second property", "third_one": "All Web Site Data"}

My goal is to display these values in a custom select format. When the user clicks on the select, I want to open a modal without displaying the dropdown list. Unfortunately, I am unsure how to implement this feature. Are there any libraries in reactJS that could help me achieve this? I would greatly appreciate any guidance or solutions you can provide.

javascript html css reactjs

Answer 1

Answer №1

Here is a solution that should do the trick. Basically, you store all your options in the state as mentioned before, giving each one a value and the corresponding display name. The activeItem in the state keeps track of the current selection in the dropdown and is updated through the onChange event.

class TaskList extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      activeItem: '',
        items: [
          {
            value: "allAccounts",
            name: "All accounts"
          },
          {
            value: "secondProperty",
            name: "Second Property"
          },
          {
            value: "allWebsites",
            name: "All Web Site Data"
          }
        ]
    }
  }

  componentDidMount() {
    this.setState({activeItem: this.state.items[0].value})
  }

  render() {
    const {items, activeItem } = this.state;
    return (
      <div>
        <select onChange={(e) => this.setState({activeItem: e.target.value})}>
          {items.length && items.map((item, index) => {
                return <option key={index} value={item.value}>{item.name}</option>;    
          })}
        </select>
        <div>Active Item: {activeItem}</div>
      </div>
    )
  }
}

ReactDOM.render(<TaskList />, document.querySelector("#app"))

Answer 2

Here is a solution that should do the trick. Basically, you store all your options in the state as mentioned before, giving each one a value and the corresponding display name. The activeItem in the state keeps track of the current selection in the dropdown and is updated through the onChange event.

class TaskList extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      activeItem: '',
        items: [
          {
            value: "allAccounts",
            name: "All accounts"
          },
          {
            value: "secondProperty",
            name: "Second Property"
          },
          {
            value: "allWebsites",
            name: "All Web Site Data"
          }
        ]
    }
  }

  componentDidMount() {
    this.setState({activeItem: this.state.items[0].value})
  }

  render() {
    const {items, activeItem } = this.state;
    return (
      <div>
        <select onChange={(e) => this.setState({activeItem: e.target.value})}>
          {items.length && items.map((item, index) => {
                return <option key={index} value={item.value}>{item.name}</option>;    
          })}
        </select>
        <div>Active Item: {activeItem}</div>
      </div>
    )
  }
}

ReactDOM.render(<TaskList />, document.querySelector("#app"))

Steps to Implement Dropdown with Multiple Selection in ReactJS

Answer №1

Similar questions

Custom variables can be passed to subscription buttons through Paypal

Executing Rake tasks on the live server fails because of an issue with ExecJS

What does the client perceive or not perceive? Node.js, JavaScript, MySQL

Is there a way to make a string evaluate inline using JavaScript and React?

What other options are available besides componentDidUpdate for retrieving the chosen date from a date picker and including it in an API request?

To retrieve the request parameter within the socket.on operation

Determining the offsetWidth and scrollWidth for option elements within a select field containing the multiple attribute on Internet Explorer 11

Is there a workaround available for the JavaScript timeout and interval functions in XPages SSJS?

The placement of text appears to be incorrect when applying the float:left property in CSS

Steps to showcase a HTML modal based on the outcome of a JavaScript/AJAX database query

Implementing NodeJS to showcase an array of items - the step-by-step guide

HowlerJS: Unauthorized Access - Error Code 401

jQuery Datatables causing hyperlinks to malfunction on webpage

Prioritize loading the JS function before initiating PHP validation

Looking for assistance with fixing the echo issue in my PHP temperature converter script. Any help is greatly appreciated

Using ant-design with react-draggable for modals: A step-by-step guide

Queries with MongoDB RegEx fail to return any matches if the search string contains parentheses

What causes getServersideprops to return undefined?

The paginationMeta.hasNextPage function in mui DataGrid seems to be malfunctioning

The button's color remains static in Internet Explorer despite attempts to change it using a linear gradient background image