i'm using material ui as the mandatory library for the current
project. A page of a project requires four tabs, so I'm using the tab component from material ui library.

When I'm rendering the page which contains the tabs by default the first tab is the active tab. I want to set the fourth tab as active.

From the documentation, I see the value prop of the Tab. So I set the values of my four tabs to 1,2,3 and 4 for each Tab respectively. When Inavigate to the respective screen , i dispatch an action which is set property tab value in my store as 4.

Then though mapStateToProps i'm made this property accessible to my component. So the value when I enter the page is four but still the active Tab is the first one. Let me show you my code:

const mapStateToProps = state => ({

   value: state.get('tabValue');

});



const mapDispatchToProps = dispatch => ({

 tabClicked: () => setActiveTab('tabValue', 4)

})

And my component:

const Tabs = ({ value }) => (

 <Tabs>

   <Tab value={1}></Tab>

   ....

   <Tab value={value}</Tab>

 </Tabs

)