在 React JSX 中运行循环并应用条件

Question

I have written a React component which will render Material UI Cards in a Grid. In one row there would be 4 cards. If total number of cards is divisible by four then it is not problem but how can I add the condition to check and render cards if it is not divisible by 4. I am writing functions to render 3 cards, 2 cards or 1 card depending on what is left in the last.

This is my React code and I need to optimise to render elements in grids.

 export default function NestedGrid(props) { const classes = useStyles(); const items = []; function returnFourCards(i) { return ( <Grid container item xs={12} spacing={3} className={classes.gridContainer} > <React.Fragment> <Grid item xs={3}> <Link to={"/updategroup/" + props.groupList[i].Number} className={classes.linkStyle} > <GroupsCard AD_groups={props.groupList[i].AD_groups} Team={props.groupList[i].Number} Owner={props.groupList[i].Owner} Email={props.groupList[i].Email} Name={props.groupList[i].Name} /> </Link> </Grid> {console.log(i++)} <Grid item xs={3}> <Link to={"/updategroup/" + props.groupList[i].Number} className={classes.linkStyle} > <GroupsCard AD_groups={props.groupList[i].AD_groups} Team={props.groupList[i].Number} Owner={props.groupList[i].Owner} Email={props.groupList[i].Email} Name={props.groupList[i].Name} /> </Link> </Grid> {console.log(i++)} <Grid item xs={3}> <Link to={"/updategroup/" + props.groupList[i].Number} className={classes.linkStyle} > <GroupsCard AD_groups={props.groupList[i].AD_groups} Team={props.groupList[i].Number} Owner={props.groupList[i].Owner} Email={props.groupList[i].Email} Name={props.groupList[i].Name} /> </Link> </Grid> {console.log(i++)} <Grid item xs={3}> <Link to={"/updategroup/" + props.groupList[i].Number} className={classes.linkStyle} > <GroupsCard AD_groups={props.groupList[i].AD_groups} Team={props.groupList[i].Number} Owner={props.groupList[i].Owner} Email={props.groupList[i].Email} Name={props.groupList[i].Name} /> </Link> </Grid> {console.log(i++)} </React.Fragment> </Grid> ); } function returnThreeCards(i) { return ( <Grid container item xs={12} spacing={3}> <React.Fragment> <Grid item xs={3}> <Link to={"/updategroup/" + props.groupList[i].Number} className={classes.linkStyle} > <GroupsCard AD_groups={props.groupList[i].AD_groups} Team={props.groupList[i].Number} Owner={props.groupList[i].Owner} Email={props.groupList[i].Email} Name={props.groupList[i].Name} /> </Link> </Grid> {console.log(i++)} <Grid item xs={3}> <Link to={"/updategroup/" + props.groupList[i].Number} className={classes.linkStyle} > <GroupsCard AD_groups={props.groupList[i].AD_groups} Team={props.groupList[i].Number} Owner={props.groupList[i].Owner} Email={props.groupList[i].Email} Name={props.groupList[i].Name} /> </Link> </Grid> {console.log(i++)} <Grid item xs={3}> <Link to={"/updategroup/" + props.groupList[i].Number} className={classes.linkStyle} > <GroupsCard AD_groups={props.groupList[i].AD_groups} Team={props.groupList[i].Number} Owner={props.groupList[i].Owner} Email={props.groupList[i].Email} Name={props.groupList[i].Name} /> </Link> </Grid> {console.log(i++)} </React.Fragment> </Grid> ); } function returnTwoCards(i) { return ( <Grid container item xs={12} spacing={3}> <React.Fragment> <Grid item xs={3}> <Link to={"/updategroup/" + props.groupList[i].Number} className={classes.linkStyle} > <GroupsCard AD_groups={props.groupList[i].AD_groups} Team={props.groupList[i].Number} Owner={props.groupList[i].Owner} Email={props.groupList[i].Email} Name={props.groupList[i].Name} /> </Link> </Grid> {console.log(i++)} <Grid item xs={3}> <Link to={"/updategroup/" + props.groupList[i].Number} className={classes.linkStyle} > <GroupsCard AD_groups={props.groupList[i].AD_groups} Team={props.groupList[i].Number} Owner={props.groupList[i].Owner} Email={props.groupList[i].Email} Name={props.groupList[i].Name} /> </Link> </Grid> {console.log(i++)} </React.Fragment> </Grid> ); } function returnOneCard(i) { return ( <Grid container item xs={12} spacing={3}> <React.Fragment> <Grid item xs={3}> <Link to={"/updategroup/" + props.groupList[i].Number} className={classes.linkStyle} > <GroupsCard AD_groups={props.groupList[i].AD_groups} Team={props.groupList[i].Number} Owner={props.groupList[i].Owner} Email={props.groupList[i].Email} Name={props.groupList[i].Name} /> </Link> </Grid> {console.log(i++)} </React.Fragment> </Grid> ); } for (let i = 0; i < props.groupList.length; ) { let cardContent; if (props.groupList.length - i >= 4) { cardContent = returnFourCards(i); i += 4; } else if (props.groupList.length - i === 3) { cardContent = returnThreeCards(i); i += 3; } else if (props.groupList.length - i === 2) { cardContent = returnTwoCards(i); i += 2; } else if (props.groupList.length - i === 1) { cardContent = returnOneCard(i); i += 1; } items.push(cardContent); } return ( <div className={classes.root}> <Grid container spacing={1}> {items.map((item) => item)} </Grid> </div> ); }

This code is working but It is not optimised. I want to learn an efficient way to write this.

Answer 1

you can shorten this code by a lot by using map function and ternary operators to decide the styling if that is your goal.

export default function NestedGrid(props) {
  const classes = useStyles();

  const { groupList } = props;

  return (
    <div className={classes.root}>
      <Grid container spacing={1}>
        {groupList.map((item, index) => {
          return (
            <Grid container item xs={12} spacing={3}>
              <Grid item xs={3}>
                <Link
                  to={"/updategroup/" + item[index].Number}
                  className={classes.linkStyle}
                >
                  <GroupsCard
                    AD_groups={item[index].AD_groups}
                    Team={item[index].Number}
                    Owner={item[index].Owner}
                    Email={item[index].Email}
                    Name={item[index].Name}
                  />
                </Link>
              </Grid>
            </Grid>
          );
        })}
      </Grid>
    </div>
  );
}

Now regarding any changes you want to implement I would go with inline styling if it is not too complex, if it is would create classnames based on amount of cards and move the styling to a separate css/scss file.

If you have any questions feel free to comment them down below and will edit my answer accordingly.

UPDATE:

If you want to display more than 1 card in a row (for example 4) all you have to do it remove the first Grid tag that is xs={12} as it means it will take the entire space and put it outside the map function.

now if you want to have more control and decide what will render how before the return line you can write conditions and multiple returns instead but the best way will be to not use the Grid tag and have a regular div which you can fully style inline or in an external css/scss file.