Home > other >  Object iteration in react component render is not working
Object iteration in react component render is not working

Time:10-26

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>
    );
  }

CodePudding user response:

 ....
  {
    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.

map

  • Related