I have a tabbed menu on my page, which is basically a bunch of divs that get shown/hidden depending on the tab that's clicked. I want to be able to refetch the data in a React Component in one of the divs once it appears.

ponentDidMount fires at the very beginning, so it's not an option. It would be nice to just have an HTML event onShow similar to onClick but nothing like that seems to exist.

Any suggestions?

I have a tabbed menu on my page, which is basically a bunch of divs that get shown/hidden depending on the tab that's clicked. I want to be able to refetch the data in a React Component in one of the divs once it appears.

ponentDidMount fires at the very beginning, so it's not an option. It would be nice to just have an HTML event onShow similar to onClick but nothing like that seems to exist.

Any suggestions?

• javascript
• reactjs
• event-handling
• dom-events

3 Answers 3

I have a Tabs ponent but in my case, all tabs content are mounted but not displayed. When I click on a tab, I just change the visibility with css

But to refetch data, you should make a ponent for the containers that fetch the data in his ponentDidMount so, in the top level if you switch which one renders, the ponentDidMount will trigger.

Put some code if you want some help with your case

Per the docs, ponentDidUpdate is probably what you're looking for. It's called after props and/or state has changed and the ponent has re-rendered (not called for the initial render).

That said, it's probably simpler to just handle the data fetching in the onClick handler itself or better yet, fetch the data once in the parent ponent and pass down the relevant slice of data to the tabs and then show / hide as appropriate.

Hey You have to separate out the tab as ponent and render those ponent based on tab changed let me give one example over here.

Suppose I have one Page called MainPage in that Page I have Tab Control which Contain the Three tab First,Second and Third.

first you have to create a three Component like

var First=React.createClass({ // First Tab Content goes here });
var Second=React.createClass({// Second Tab Content goes here});
var Second=React.createClass({// Third Tab Content goes here});

Now your MainPage Should look like

 var MainPage=React.createClass({
        onClick:function(e)
        {
          if($(e.target).attr('id')=="1")
          {
           React.render(<First />,document.getElementById('tab-content'));
          }
           else if($(e.target).attr('id')=="2")
          {
           React.render(<Second />,document.getElementById('tab-content'));
          }
           if($(e.target).attr('id')=="3")
          {
           React.render(<Third />,document.getElementById('tab-content'));
          }
        },
        render:function()
        {
        return(
          <div>
            <div>
              //Three Tabl goes here 
              <div id="1" onClick={this.HandleTab}>Tab 1</div>
              <div id="2" onClick={this.HandleTab}> Tab 2</div>
              <div id="3" onClick={this.HandleTab}>Tab 3</div>
            </div>
            //your Container Div 
            <div id="tab-content">
            </div>
          </div>

        )
        }
})