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;
href='/'
that's why, removehref
froma
or usehref='javascript:void(0)'
href
. TheonClick
won't fire because the link is taking you to another page.