Using ReactModal button with Href, not working. Unsure why

Question

I am fairly new to react and have redone my personal site in react. The issue I am running into is my button that links (with href) to my JSfiddle for each portfolio demo is not working. I am not sure if I did not bind correctly or what exactly the issue is other than when the modal is open, the Demo button does not work. Close modal button works fine. Please see code below.

import React from 'react';
import ReactModal from 'react-modal';

class Project extends React.Component {
constructor () {
    super();
        this.state = {
          showModal: false
    };

    this.handleOpenModal = this.handleOpenModal.bind(this);
    this.handleCloseModal = this.handleCloseModal.bind(this);
  }

handleOpenModal() {
    this.setState({ showModal: true});
}

handleCloseModal() {
    this.setState({ showModal: false});
}

componentWillMount() {
    ReactModal.setAppElement('body');
}

render() {
    const { details } = this.props;

    return (
        <li className="Project">
            <div onClick={this.handleOpenModal}>
                <img className="Project-image" src={'projects/' + details.image} alt={details.name}/>
                <div className="Project-overlay">
                    <p>{details.name}</p>
                </div>
            </div>
            <div >
                <ReactModal 
                    isOpen={this.state.showModal} 
                    contentLabel="This is my Modal" 
                    shouldCloseOnOverlayClick={true}
                    onRequestClose={this.handleCloseModal}
                >
                  <div className="modal-header">
                      <h3>{details.name}</h3>
                  </div>
                  <div className="modal-body">
                      <img className="Project-image" src={'projects/' + details.image} alt={details.name} />
                      <p className="desc-body">{details.desc}</p>
                      <p className="desc-body">{details.link}</p>
                  </div>
                  <div className="modal-footer">
                      { details.havLink && <button className="button" href={details.link}>Click for Demo!</button> }
                      <button className="button" onClick={this.handleCloseModal}>Close Modal</button>
                  </div>
                </ReactModal>

            </div>
            <div className="Project-tag">
                <p>{details.tag}</p>
            </div>
        </li>
    )
  }
}

const props = {};

export default Project;

The issue is in the first line of the "modal-footer" class. This button will show if the havLink property is true. This data is being exported from another JS file. Everything else (image, description, modal title) all import correctly, even the link I set imports correctly but when the button is pushed nothing fires as I expected. I do not see any errors in my React dev tools either.

{details.link} as an href is not routing me to the specified link. The link will show up in the paragraph tag though (just to see if correct link populated).

Let me know if anything else is needed, I am hoping the solution is as simple as an incorrect binding. Thank you in advance!

Answer 1

<button> does not have the href attribute. You should be using an anchor element <a>. To the anchor you can pass whatever class or style you want to make it look like a button, but it's still an anchor element, not button.