Tuesday 30 May 2017

Set tabs to active using React

I'm using React as a template engine for express and trying add a css class to the appropriate anchor element.

I'm currently passing back the request path through the controller to the Navbar component. Below is my code. I feel I'm so close....

const React = require('react');


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

  componentWillMount() {
    console.log("Current Path is: " + this.props.path)
    this.checkActiveTab(this.props.path)
  }

  checkActiveTab(path) {
    if(path == this.state.currentPage) {
      console.log("Path is the same as currentPage")
    }
  }

  setActiveTab(link) {
    this.setState({
      currentPage: link.href 
    })
  }

  render() {
    const { path } = this.props
    return (
      <nav className="nav">

        <div className="nav-left">
          <a className="nav-item">
            <h1>FanDemand</h1>
          </a>
        </div>

        <div className="nav-right nav-menu">
          <a href="/" className="nav-item is-tab is-active">
            Home
          </a>
        </div>


      </nav>
    )
  }
}

module.exports = Navbar;



via Dileet

No comments:

Post a Comment