Set tabs to active using React

Question

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....

UPDATED CODE (5/31/2017):

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;

@VikramSaini Currently not facing any error. This is showing in console: console.log("Path is the same as currentPage"). I'm not sure what the next steps are to execute adding a class to the right anchor tag — Dileet, May 31 '17 at 04:41
okay can you please explain what exactly you want to achieve? — Vikram Saini, May 31 '17 at 04:44
@VikramSaini I guess in this case, when I press a link it will set the state of currentPage to the ahref attribute as well removing the "is-active" class from the previous anchor link and adding it to the link clicked. If you can help me with this, you're a gem! :) — Dileet, May 31 '17 at 04:47
'have you tried using react router for it.Refer this link https://stackoverflow.com/questions/31079081/programmatically-navigate-using-react-router — Vikram Saini, May 31 '17 at 04:52

score 1 · Answer 1 · answered May 31 '17 at 05:01

1

There are multiple ways to accomplish this.

I don't know much about the rest of your app, but this is the general approach you will have to take:

First modify checkActiveTab to return a boolean if it is the active path:

checkActiveTab = (path) => {
 return path === this.state.currentPage;
}

(Side note: Did you include your full component? I am not sure how it is working to check this.state as you are not binding this to the checkActiveTab function)

Next when you render the tabs, you will check if it is the current page, then we will set an active class:

<a href="/" className={`nav-item is-tab ${ this.checkActiveTab('Home') ? 'is-active' : '' }`}>
  Home
</a>

answered May 31 '17 at 05:01

Laith Azer

589
2
7

I did include my full component. How would I change the state to the current page? – Dileet May 31 '17 at 17:41
I just updated my code in the question. I created a function to set the state onClick, but it doesn't seem to be registering as I'm not getting the console log set inside the function. – Dileet May 31 '17 at 18:14
That is because you are using an anchor tag, and that causes the browser to go to a new page and the component will be mounted again. – Laith Azer May 31 '17 at 18:42
In order to fix that, try calling `e.preventDefault()` before you `console.log` – Laith Azer May 31 '17 at 18:43

score 1 · Answer 2 · answered May 31 '17 at 05:21

if I was this I could have done this in this way

I could have made this nav as component with some logic to add active class.

const Nav = (props) => {
    let classString = props.isActive ? 'nav-item is-tab is-active' : 'nav-item is-tab'
    return (<div className="nav-right nav-menu">
          <a href={props.path} className={classString}>
            Home
          </a>
        </div>
    )
}

now you can write logic based in the parent component to check sent path and isActive boolean for Nav component.

Based on the url I can identify which Nav will have the isActive props as true.

example

<Nav path={this.props.path} isActive ={this.props.path === this.state.currentPage} </Nav>

Updated my code. The parent doesn't have the state of the navbar regarding the current page. So we should stay withing the navbar component. My current issue is updating the navbar state when I click on the appropriate link. Right now when I press on the home link, I'm not getting the console.log set in the function. — Dileet, May 31 '17 at 18:17

Set tabs to active using React

2 Answers2