Easier way to to disable link in React?

Question

I want to disable Link in some condition:

render() {
    return (
{this.props.canClick ? 
        Test         


        

Answer 1

You could just set set the link's onClick property:

render () {
  return(
    
 
    { 
      this.props.notClickable
      ?  event.preventDefault() }>Link
      : Link
    }
    
  );
};

Then disable the hover effect via css using the cursor property.

.disabledCursor { 
  cursor: default;
}

I think that should do the trick?