CODEWITHSUNDEEP
reactjs
Shoaib
Shoaib

Reputation: 90

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

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

Upvotes: 0

Views: 1153

Answers (1)

Dillan Wilding
Dillan Wilding

Reputation: 1111

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/

Upvotes: 1

Related Questions