Disable link based on input values: ReactJS

Question

I noticed that disable is not working as expected for component in REACT.

<Link onClick={() => this.DoSomething()}
disabled={this.props.status != "Approved"}>
<NavDropdown.Item>Approve</NavDropdown.Item>
</Link>

I want to stop the traversal of link for particular condition. --For status =Approved only in this case i want it to call this.DoSomething()

With ternary(conditional) operator condition, i am unable to compare in the LINK component.

I cant not put entire link component in conditional operator as i need NavBar for both the scenarios.

It may help to share complete component code including the imports, or informing what `Link` is so we can see what props it accepts. — Drew Reese, Jul 12 '20 at 07:45
I think it may be helpful [Link](https://stackoverflow.com/questions/35963070/react-router-how-to-disable-a-link-if-its-active) — Jay Parmar, Jul 12 '20 at 08:28

score 1 · Answer 1 · answered Jul 12 '20 at 07:45

1

OnClick will be called whether disabled is true or not. If you want to prevent traversal you can do something like this inside DoSomething

  DoSomething = (e) => {
    if(this.props.status != "Approved") {
      e.preventDefault();
    }
  }

answered Jul 12 '20 at 07:45

Naresh

941
9
22

score 1 · Answer 2 · answered Jul 12 '20 at 08:31

You should define a variable to use in both in the disabled and the onClick function:

const disabled = this.props.status != "Approved"
<Link onClick={() => disabled ? return : this.DoSomething()}
disabled={disabled}>
<NavDropdown.Item>Approve</NavDropdown.Item>
</Link>

Disabled is only a boolean, it will never effect your added eventListener onClick. https://www.w3schools.com/tags/att_disabled.asp#:~:text=Definition%20and%20Usage,a%20checkbox%2C%20etc.).

Disable link based on input values: ReactJS

2 Answers2