0

I am having this problem since a while. Whenever I am trying to click a link and call the onclick function all the other onclick function gets called. I dont know how is this happening

<li className={activepage==="dashboard"?'active':''} onClick={changePage("dashboard")} >
    <a href="#">
        <i className="fa fa-dashboard fa-lg" /> Dashboard
    </a>
</li>

<li data-toggle="collapse" data-target="#products" className={activepage==="entries"?'active':''} onClick={changepage("entries")}>
    <a href="#" >
        <i className="fa fa-gift fa-lg" />Entries <i className="fas fa-down-arrow" />
        <span className="arrow" />
    </a>
</li>

I am having this problem for a white and i cant find a solution

yunandtidus
  • 3,847
  • 3
  • 29
  • 42
Asim Dahal
  • 147
  • 2
  • 11
  • 1
    looks like `changePage` is not a closure – anoop Jul 17 '18 at 06:46
  • What is the code of `changepage("dashboard")`?? Try calling `onClick={() => changePage("dashboard")}` – Sangsom Jul 17 '18 at 06:46
  • also why are you using className? never heared of that in html, normaly its just class="" or id="".. – Christopher Supertramp Jul 17 '18 at 06:49
  • @ChristopherSupertramp that's because of reactjs code. – kravisingh Jul 17 '18 at 06:51
  • are you working on single page application. I also faced this issue. When viewmodels are not properly disposed then this type of issue occur. – Deepak Kumar Jul 17 '18 at 06:53
  • 1
    @ChristopherSupertramp it's JSX code. Not really html but looks like html :) `JSX is a preprocessor step that adds XML syntax to JavaScript.` – Mihai T Jul 17 '18 at 06:56
  • For the OP, seems like you have `changepage` and `changePage`. That's one issue. Second, you should use arrow function `onClick={() => this.changePage("dashboard")}`. And i am guessing you have at the top of the component the function something like `changePage = (value) => { history.push(value) } ` or that you have that function on your props. in that case `this.props.changePage(value)` – Mihai T Jul 17 '18 at 06:59

2 Answers2

0

You can use bind changepage.bind(null, "entries") or you can use 

() => {
 changepage("entries")
}
Jitesh Manglani
  • 495
  • 5
  • 12
0

Instead of: 

onClick={changepage("entries")}

Try this: 

onClick={() => changepage("entries")}
Rayes
  • 94
  • 10
  • how to do that on a functional component? – Asim Dahal Jul 17 '18 at 06:53
  • If I am understanding your question correctly, then try adding "this" to changepage("entries") like this this.changepage.bind(this,"entries") for example, or if entries is a variable then this.changepage.bind(this,entries) – Rayes Jul 17 '18 at 06:56