How to disable a link tag in React

In this tutorial you will learn how you can disable a link tags in React

We will use both CSS and Javascript ways to disable the link tag in React.

Suppose we have a simple <Home /> component with two a element tags

import React from 'react';

const Home = ({disableHome})=>{ 
  return (
    <ul>
      <li><a href="home">Home</a></li>
      <li><a href=" dabout">About</a></li>
    </ul>
  );
}

export default Home;

Disable the link tag

set the css property pointer-events to none to disable the link using css

import React from 'react';

const Home = ({disableHome})=>{ 
  return (
    <ul>
      <li>
        <a href="home" style={disableHome ? {pointerEvents: 'none'}: {}}>
          Home
        </a>
      </li>
      <li><a href="about">About</a></li>
    </ul>
  );
}

And, the onClick event handler of the link tag will call event.preventDefault() method

import React from 'react';

const Home = ({disableHome})=>{ 

  const handleLinkClick = (event) => {
    event.preventDefault()
  }
  return (
    <ul>
      <li>
        <a 
          href="home" 
          style={disableHome ? {pointerEvents: 'none'}: {}}
          onClick={handleLinkClick}
        >
          Home
        </a>
      </li>
      <li><a href="about">About</a></li>
    </ul>
  );
}

Related Solutions

• How to disable a Button when an Input field is Empty in React

• How to disable a select field in React

• How to conditionally disable an input field in React

• How to change button text on click in React