disable buttons that are in the array

Question

I would like to disable only the buttons for the rooms that is in the array as below. The array are on my state, this.state ={ disableRoom:["room02", "room03", "room04", "room05"] }


     <Row>
                                {this.state.rooms.map((roomName, i) =>

                                    <Col>
                                        <Button disabled={this.state.disableRoom} >
                                            {roomName}
                                        </Button>
                                    </Col>
                                )}
    </Row>

score 3 · Accepted Answer · answered Jul 23 '19 at 11:11

You could use the .includes() method on array to check if the roomName is present inside the disablRoom array. It returns a boolean value that you could set to the disabled attribute. Something like this

 <Row>
   {this.state.rooms.map((roomName, i) =>
     <Col>
       <Button disabled={this.state.disableRoom.includes(roomName)}> {roomName}</Button>
     </Col>
   )}
 </Row>

Notice disabled={this.state.disableRoom.includes(roomName)}.

score 1 · Answer 2 · answered Jul 23 '19 at 11:47

Try going about it this way this.state = {rooms: [{name:'room1', isDisabled:true}, {name:'room2', isDisabled:false}, {name:'room3', isDisabled:true}, {name:'room4', isDisabled:false}]};

<Row>
   {this.state.rooms.map((room) =>
   <Col>
      <Button disabled={room.isDisabled}>{ room.name }</Button>
   </Col>
   )}
</Row>

replace rooms objects with your desired properties.

score 0 · Answer 3 · answered Jul 23 '19 at 11:27

you can use find method to find if roomName is present in the disableroom array like this:

class App extends React.Component {
  constructor(){
    super()
    this.state={
      rooms:["room12","room10","room13","room15","room02", "room03", "room04", "room05"],
      disableRoom:["room02", "room03", "room04", "room05"] 
    }
  }

render(){
  return (
    <div className="App">
     <Row>
     {this.state.rooms.map((roomName, i) =>
       <Col>
              <Button disabled={this.state.disableRoom.find(el=>el===roomName?true:false)} >
                {roomName}
               </Button>
        </Col>
      )}
    </Row>
    </div>
  );
}
}

disable buttons that are in the array

3 Answers3