Question 50702 in Javascript Question posted in
A very good W3school tutorial can be found here.

How to disable some dropdown options in Reactjs – Javascript

I Have a Dropdown and that Dropdown have some list of items, Here I need to disable some dropdown options, Disable options means the dropdown options should become disable i.e. not clickable.

I tried like this, But it will only disable 1st and 3rd options, So in further options may change, So below code dosen’t work…..

 `  ` options={data}
    getOptionDisabled={(option) => {
      // Mention options which needs to be disable
      return option === data[1] || option === data[3]
    }``

So Can we get a list of Items and can we Disable those list of Items??? Is that will work???

I am requesting anyone having any Idea to disable some dropdown options.`

Here is my Code:

`import React from 'react'
 import { inputs } from '../Common/Data';


`const Dropdown = () => {
    const data = inputs;
    //console.log(data.purpose);
    return (
        <>
            <div className='form-group'>
                <div className="col-4">
                    <select className="form-select" aria-label="Disabled select example">
                        <option selected>Select an Option</option>
                        {data.purpose.map((items) => (
                            //console.log(items.value);
                            <option >{items.value}</option>
                        ))}
                    </select>
                </div>
            </div>           
        </>
    )
}`

export default Dropdown
Tags:

3

Answers


  1. 0

    why you don’t want to use the disabled attribute?
    like: <option disabled={theFuncReturnedTrueOrFalse} >value</option>

    so if you have to wait for data from API,
    i think you can use the optional chain ?:

    let disabledItemsArr=["5","7"];

{data?.purpose?.map((items) => (                             
    <option disabled={disabledItemsArr.includes(items.value)}> 
         {items.value}</option>                         
))}

    -_-

    Login or Signup to reply.
  2. 0 
    import React from 'react'


const App = () => {
    // let's suppose that is data coming from the backend
    let data = {
        purpose: [
            {
                value: "1",
            },
            {
                value: "2",
            },
            {
                value: "3",
            },
            {
                value: "4",
            },
        ]
    }

    // and if you want to disable 2 and 3 items then you have to restructured the array

    const disabledItemsArr = ["2", "3"]

    // restructured array and here you are adding a new disabled property in the array that will be true or false
    const newArr = data.purpose.map(item => ({...item, disabled: disabledItemsArr.includes(item.value) ? true : false}))

    return (
        <>
            <div className='form-group'>
                <div className="col-4">
                    <select className="form-select" aria-label="Disabled select example">
                        <option selected>Select an Option</option>
                        {newArr.map((items) => (
                            // In the option you can use the disabled property for disable the option
                            <option disabled={items.disabled}>{items.value}</option>
                        ))}
                    </select>
                </div>
            </div>           
        </>
    )
}


export default App;

    updated code:

    const disabledItemsArr = ["Credit Card Payment", "Family Support (Workers uninons)"] 
const newArr = data.purpose.map(item => ({...item, disabled: disabledItemsArr.includes(item.value) ? true : false})) 

{newArr.map((items) => (
    // In the option you can use the disabled property for disable the option
    <>
        <option selected>Select an Option</option>
        <option disabled={items.disabled}>{items.value}</option>
    </>
))}

    https://codesandbox.io/s/bold-lucy-753vqk?file=/src/App.js

    Login or Signup to reply.
  3. 0

    You can change your array accordingly to disable filed value.

    let { ButtonToolbar, Button, FormGroup, ControlLabel, FormControl } = ReactBootstrap;

class SelectComponent extends React.Component {
  constructor(props){
    super(props);
    this.state = { color: ''};
  }
  
  onPickColor(e){
    console.log('[onPickColor]', this.inputEl )
    this.setState({ color: this.inputEl.value });
  }
  render(){
let data = [{"value" :"India", "disabled" : false}, {"value" :"USA", "disabled" : true}, {"value" :"UK", "disabled" : true}]
    return (
      <div style={{backgroundColor: this.state.color }}>
        <FormGroup controlId="formControlsSelect">
          <ControlLabel>Select</ControlLabel>
          <FormControl 
              onChange={this.onPickColor.bind(this)}
              inputRef={ el => this.inputEl=el }
              componentClass="select" placeholder="select">
            {data.map((items) => (
                 <option disabled={items.disabled}>{items.value}</option> ))}
          </FormControl>
        </FormGroup>
      </div>
    )
  }
}



ReactDOM.render(
  <SelectComponent />,
  document.getElementById('app')
)
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search