Easier way to to disable link in React?

Question

I want to disable Link in some condition:

render() {
    return (<li>{this.props.canClick ? 
        <Link to="/">Test</Link> : 
        <a>Test</a>}
    </li>)  
}

<Link> must specify to, so I can not disable <Link> and I have to use <a>

Answer 1

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

render () {
  return(
    <li> 
    { 
      this.props.notClickable
      ? <Link to="/" className="disabledCursor" onClick={ (event) => event.preventDefault() }>Link</Link>
      : <Link to="/" className="notDisabled">Link</Link>
    }
    </li>
  );
};

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

.disabledCursor { 
  cursor: default;
}

I think that should do the trick?

Answer 2

Your code already seems quite clean and slim. Not sure why you want an "easier" way. I'd do it exactly how you're doing it.

However, here are a few alternatives:

---

Using pointer-events

This one is probably as short and sweet as you can get it:

render() {
    return (<li>
      <Link to="/" style={this.props.canClick ? {pointerEvents: "none"} : null}>Test</Link>
    </li>)
}

---

Using onClick listener

As an alternative, you could use a generic <a> tag and add an onClick listener for the condition. This is probably better suited if you have lots of links that you want to control their state because you could use the same function on all of them.

_handleClick = () => {
  if(this.props.canClick) {
    this.context.router.push("/");
  }
}

render() {
   return (
     <li>
       <a onClick={this._handleClick}>Test</a>});
     </li>
   );  
}

The above will work assuming you are using context.router. If not, add to your class:

static contextTypes = {
  router: React.PropTypes.object
}

---

Better version of OP code

As I mentioned above, I still think your approach is the "best". You could replace the anchor tag with a span, to get rid of the styling for a disabled link (e.g pointer cursor, hover effects, etc).

render() {
    return (<li>{this.props.canClick ? 
        <Link to="/">Test</Link> : 
        <span>Test</span>}
    </li>)  
}