How to switch a tab menue on button click in react.js

Question

I have a component of header in react and in the same way a component of tabs in another file. I integrate them in app.js . Now I want to change the tabs on click of the header buttons. How could it been possible can anyone help me in this regard.

I have tried it through giving an ID to the tabs and tried to open the tab by calling that ID in href using anchor tag around the tab buttons. But this way can't help me in to open tabs. https://codesandbox.io/embed/shy-grass-l9n7m

I have pushed on heroku I can provide you the remote origin link you can clone the project from there. Can it help you? — Shoaib
– Shoaib, Commented Oct 16, 2019 at 11:19
you have something called state in react , use state to switch see this: upmostly.com/tutorials/… — 0xAnon
– 0xAnon, Commented Oct 16, 2019 at 12:47
I agree, I'd remove jQuery and just use react component state to conditionally render content. I've submitted an answer with a little more detail and a very rough proof of concept on how to apply it to the code. — Dillan Wilding
– Dillan Wilding, Commented Oct 16, 2019 at 13:11

Dillan Wilding · Accepted Answer · 2019-10-16 13:09:40Z

1

I noticed you are using jQuery to set the tab value. I suggest using React for that with something more like this: https://codesandbox.io/embed/morning-water-dit63

Note: The above code is very rough because I just through it together by modifying your code. For example, I used the active and fade class names to set the visibility of tab content where personally I might have done conditional rendering like this:

render (
  // tabs
  {this.isActive('home') && (
    // tab content here
  )}
)

Alternatively you could use a library to handle it like https://reactcommunity.org/react-tabs/

answered Oct 16, 2019 at 13:09

Dillan Wilding

1,1312 gold badges13 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to switch a tab menue on button click in react.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related