React Button Inside Anchor

by David Collins

HTML

<script src="https://unpkg.com/react-dom@0.14.3/dist/react-dom.js" type="text/javascript"></script>
<div id="container" />

CSS

a{ text-decoration: none }
a:hover{ text-decoration: underline }

Babel + JSX

class Test extends React.Component {
	//***********************
  constructor(props){
  	super(props)
    this.state={ likes:this.props.likes }
    this.anchorElement=null;
  }
  //***********************
  enter = () => { this.anchorElement.href='javascript:;'; }
  leave = () => { this.anchorElement.href='http://www.google.com'; }
  handleClick = () => { this.setState({ likes: ++this.state.likes}); }
  //***********************
  render() {
    return (
    	<div>
      <div>{'Likes:'+this.state.likes}</div>
        <a href="http://www.google.com" ref={(el) => { if (el) { this.anchorElement = el; } }}>
          <div>
            <h2 className="title">Random Title</h2>
            <button onClick={this.handleClick} onMouseEnter={this.enter} onMouseLeave={this.leave}> Like </button>
          </div>
        </a>
      </div>
    );
  }
  //***********************
}

ReactDOM.render(
  <Test likes={3}/>,
  document.getElementById('container')
);