I am getting the above error once I am refreshing the page and reloading the same props by getting it from the state.I am not able to find why is it happening while reload of page , on first load page is loading fine.
const Content = (props) => {
if (props.tabItem.contentList !== undefined) {
return (
<div>
{props.tabItem.contentList.map((tab) => {
if (props.tabItem.currentTab === tab.tabId) {
return (
<div key={props.tabItem.currentTab}>
{tab.content.props.children}
</div>
);
}
})}
</div>
);
}
return (
<div>no record</div>
);
};
My tabItem that saving in the state is like this:-
tabList = [{
tabId: '1',
tabName: 'Test'
isPrimary: true,
},
];
// create new contentList
contentList = [
{
tabId: '1',
content: <div> <Test1Container{...this.props} addTab={this.addTab} /></div>,
},
];
tabData = {
tabList,
currentTab: '1',
contentList,
};
this.props.addTabItem(tabData);
this.props.addTabItem is use to save the state.
Changes:
1. Write an
else
condition, ifif
condition fails then in that case component is not returning anything.2. We can't use
if/else
insidejsx
so use ternary operator for conditional rendering.3.
currentTab
is present insidetabData
so write it like this to access it's value:4. Return
null
if condition fails insidemap
body.Use this:
Check this sample working snippet: