Disable link in react js

Question

I want to disable a link if organization id is empty in react js.

Below is the code:

 handleDeleteClick(id) {
    let user = JSON.parse(sessionStorage.getItem("userDetail"))

    this.setState({
        organization_id:user.organization_id
    })
}

    {this.state.action_permission.delete ?
    <li className="list-inline-item px-2">
    <Link to="#" id={"delete" + role.role_id} disable = {this.state.organization_id=""} onClick={() => this.handleDeleteClick(role.role_id)} >
      <i className="bx bx-trash-alt"></i>Delete
      <UncontrolledTooltip placement="top" target={"delete" + role.role_id}>
       Delete
      </UncontrolledTooltip>
  </Link>
  </li>
 : null}

Either i want to disable the link or remove it . Any solutions?

Have you tried `this.state.organization_id ? ... : null` similar to `delete` permission check? This should completely hide the Link. Instead of `null`, you can render a simple `` element with text as per your requirement. — Prathap Reddy, Aug 18 '20 at 04:42
It's working for `action_permission.delete` right. Not working for `organization_id`? (Remember, empty space also will be truthy) — Prathap Reddy, Aug 18 '20 at 04:46
Does this answer your question? [react-router: How to disable a , if its active?](https://stackoverflow.com/questions/35963070/react-router-how-to-disable-a-link-if-its-active) — Prathap Reddy, Aug 18 '20 at 04:49
Its working for action_permission.delete . i have checked the spacing also . Not working in organization_id — karthik, Aug 18 '20 at 04:50
There is a `setState` to `organization_id` in `handleDeleteClick`. What is the initial value for `organization_id` and how are you settings it? — Prathap Reddy, Aug 18 '20 at 04:55
Organization_id value is coming from user details which is stored in session storage — karthik, Aug 18 '20 at 05:07

score 0 · Answer 1 · answered Aug 18 '20 at 05:55

Try this.

{this.state.organization_id !== "" &&
 (<Link to="#" id={"delete" + role.role_id} onClick={() => this.handleDeleteClick(role.role_id)} >
      <i className="bx bx-trash-alt"></i>Delete
      <UncontrolledTooltip placement="top" target={"delete" + role.role_id}>
       Delete
      </UncontrolledTooltip>
  </Link>
)}

Disable link in react js

1 Answers1