Anchor tag isn't calling the onClick function in React

user_2693214 0
Viewed 54998

I'm trying to update my component state when you click on an anchor tag inside the render method. I've tried binding inside the constructor, but still the console.log isn't being called. Below is my code. Please help. This is holding me back from progressing lol.

This is modified code based on my previous question here on stackoverflow.

const React = require('react');


class Navbar extends React.Component {
  constructor(...props) {
    super(...props);
    this.setActiveTab = this.setActiveTab.bind(this)
    this.state = {
      currentPage: "/"
    }
  }

  setActiveTab(e) {
    console.log(e.target)
    this.setState({
      currentPage: e.target.href 
    })
  }

  render() {
    const { path } = this.props
    let classString = path === this.state.currentPage ? 'nav-item is-tab is-active' : 'nav-item is-tab'

    return (
      <nav className="nav">

        <div className="nav-left">
          <a className="nav-item">
            <h1>CREATORS NEVER DIE</h1>
          </a>
        </div>

        <div className="nav-right nav-menu">
          <a href="/" className={classString} onClick={this.setActiveTab}>
            Home
          </a>
        </div>


      </nav>
    )
  }
}

module.exports = Navbar;
reactjs express node.js javascript
4 Answers

Researching the issue it appears you need to prevent the default of the anchor tag. Also if you create an arrow function you are able to handle the this.

Prevent default info can be found on React docs here

Hope this helps.

 const React = require("react");

class Navbar extends React.Component {
    constructor(...props) {
        super(...props);
        this.setActiveTab = this.setActiveTab.bind(this);
        this.state = {
            currentPage: "/",
        };
    }

    setActiveTab = (e) => {
        e.preventDefault();
        console.log(e.target);
        this.setState({
            currentPage: e.target.href,
        });
    }

    render() {
        const { path } = this.props;
        let classString =
            path === this.state.currentPage ? "nav-item is-tab is-active" : "nav-item is-tab";

        return (
            <nav className="nav">
                <div className="nav-left">
                    <a className="nav-item">
                        <h1>CREATORS NEVER DIE</h1>
                    </a>
                </div>

                <div className="nav-right nav-menu">
                    <a href="/" className={classString} onClick={this.setActiveTab}>
                        Home
                    </a>
                </div>
            </nav>
        );
    }
}

module.exports = Navbar;
user_128739270 
Alternatively you can have Button on grid column instead of link to perform activity.

1) Button way : 
<Button
        variant="contained"
        color="primary"
        onClick={(event) => {
          this.handleCellClick(event, cellValues);
        }}
      >
        ...View Full List
      </Button>

2) Link to work
<a href="#" onClick={this.setActiveTab}>
      ...View Full List
                    </a>
  setActiveTab = (e) => {
    e.preventDefault();
    console.log(e.target);
}
user_64331610
Related