First, I would like to inform you that am very new to react development. When I tried to render a tab with iteration I got the below error. Can someone kindly help me to identify why this not working. Is there mistake in syntax
#Implementation
Line 76: Expected to return a value in function array-callback-return
Line 77: Expected an assignment or function call and instead saw an expression no-unused-expressions
render() {
const { classes,orderTabDataCollections } = this.props;
const { value } = this.state;
return (
<div className={classes.root}>
<AppBar position="static" color="default">
<Tabs
value={value}
onChange={this.handleChange}
indicatorColor="primary"
textColor="primary"
variant="scrollable"
scrollButtons="auto"
>
{Object.keys(orderTabDataCollections).map(keyz =>
<Tab key={keyz} label={keyz.toUpperCase()} />
)}
</Tabs>
</AppBar>
{
Object.keys(this.props.orderTabDataCollections).map(function(keyz, index) {
value === index && <TabContainer key={keyz} >
<TweakDataForm key={keyz} tweakDataCollection={orderTabDataCollections[keyz]}/></TabContainer> })}
</div>
);
}
....
{
Object.keys(this.props.orderTabDataCollections).map(function(keyz, index) {
if(value === index){
return <TabContainer key={keyz} >
<TweakDataForm key={keyz} tweakDataCollection=
{orderTabDataCollections[keyz]}/>
</TabContainer>
}
return null;
})}
map should return some value from its callback if callback function is passed. Updating the code for map wrapping TabContainer like above should fix Line 76: Expected to return a value in function error.