Disable buttons in ReactJS

Question

How can i disable other buttons(AiOutlinePlus) while clicking on one button(AiOutlinePlus)in ReactJS.It should be in the form of one button can be clicked at a time.

  <div className="left">
              <hr className="hr"/>
              <div className="left_headers">
                <h2>xxxxxxxxxxxxxxxxxx</h2>
                <i onClick ={()=>setShowLinks(!showLinks)}>
                  <AiOutlinePlus />
                </i>
              </div>
              <p id={showLinks ? "hidden" : ""}>
                xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
              </p>
              <button id={showLinks ? "hidden" : ""}xxxxxxxx</button>
              <hr className="hr"/>
              
             <div className="left_headers">
                <h2>xxxxxxxxxxxxxxxxxx</h2>
                <i onClick ={()=>setShowLinks(!showLinks)}>
                  <AiOutlinePlus />
                </i>
              </div>
              <p id={showLinks ? "hidden" : ""}>
                xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
              </p>
              <button id={showLinks ? "hidden" : ""}xxxxxxxx</button>
              <hr className="hr"/>
              <div className="left_headers">
                <h2>xxxxxxxxxxxxxxxxxx</h2>
                <i onClick ={()=>setShowLinks(!showLinks)}>
                  <AiOutlinePlus />
                </i>
              </div>
              <p id={showLinks ? "hidden" : ""}>
                xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
              </p>
              <button id={showLinks ? "hidden" : ""}xxxxxxxx</button>
          </div>

Vikram Patil · Accepted Answer · 2021-07-30 05:04:28Z

0

You need to pass some unique identifier to each button to identify each button. When you click on any one button you need to set a variable in the state which would be used to identify the button clicked. Once the state is updated, you could use it to not set the event handler onClick on the other buttons. The same state could also be used to disable the other buttons.

answered Jul 30, 2021 at 5:04

Vikram Patil

1622 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Shriyacodes · Accepted Answer · 2021-07-30 05:52:54Z

Using disabled attribute and state, you can make buttons disabled in Reactjs.

Firstly you have to use the <button> HTML tag and use the icons inside it. The element has a disabled attribute. Below given is a sample component for understanding. Say these are two buttons & here I have used React icons. Clicking the first button disables the second.

 class Button extends React.Component{
    constructor(props){
     super(props)

    this.state={btn1:false}
    this.handleClick=this.handleClick.bind(this)
  }

  handleClick(){
   this.setState({btn1: true})
  }
 render(){
  const{btn1}=this.state

     return(

  <div>
    <button onClick={this.handleClick}> <AiFillEyeInvisible color="red" size={60}/></button>
    <button disabled={alert1}> <AiFillEye color="green" size={60}/></button>

   </div>
   )
  }
 }

If you want to know more check this answer- How to disable button in React.js

Collectives™ on Stack Overflow

Disable buttons in ReactJS

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related