Я хотел бы знать, как я могу реализовать оператор if внутри .map ()
См. Код ниже.
В настоящее время кнопка удаления отключена, если изображение не загружено текущим пользователем, но моя цель - вообще не отображать кнопку удаления.

    return <Grid container justify="center" spacing={2}>
        {/* All images */}
        {docs && docs
            // For every image
            .map(image => (
                // In a grid item
                <Grid className="img-item" item key={image.id} xs={12} md={6} lg={4}>
                    {/* all accounts */}
                    {docs2 && docs2
                        // For every single image:
                        // Filter statament only contains the user of specific image
                        // https://medium.com/poka-techblog/simplify-your-javascript-use-map-reduce-and-filter-bd02c593cc2d
                        .filter((user) => image.userID === user.userID)
                        //Now you have the user that belongs to the image.ID
                        .map(user => (
                            <div key={image.id}>
                                <img src={image.url} alt="uploaded pic" />
                                <Typography variant="subtitle1"> By {user.userName}

                                    {/* How do I implement this if statement for the IconButton? */}
                                    {/* if ({handleButton(image.userID)} === false){
                                        return 
                                    } */}

                                    {/* Delete button */}
                                    <IconButton
                                        disabled={handleButton(image.userID)}
                                        color="secondary" aria-label="delete image"
                                        onClick={() => handleDeleteImage(image.id, image.userID, image.name)}
                                        component="span" >
                                        <DeleteForever />
                                    </IconButton>

                                </Typography>
                            </div>
                        ))}
                </Grid>
            ))}
    </Grid>
}
export default ImageGrid;
3
Furkan Öztürk 21 Янв 2021 в 16:14

2 ответа

Лучший ответ

Вы ищете

   return <Grid container justify="center" spacing={2}>
    {/* All images */}
    {docs && docs
        // For every image
        .map(image => (
            // In a grid item
            <Grid className="img-item" item key={image.id} xs={12} md={6} lg={4}>
                {/* all accounts */}
                {docs2 && docs2
                    // For every single image:
                    // Filter statament only contains the user of specific image
                    // https://medium.com/poka-techblog/simplify-your-javascript-use-map-reduce-and-filter-bd02c593cc2d
                    .filter((user) => image.userID === user.userID)
                    //Now you have the user that belongs to the image.ID
                    .map(user => (
                        <div key={image.id}>
                            <img src={image.url} alt="uploaded pic" />
                            <Typography variant="subtitle1"> By {user.userName}

                                {/* How do I implement this if statement for the IconButton? */}
                                {/* if ({handleButton(image.userID)} === false){
                                    return 
                                } */}

                                {/* Delete button */}
                                { handleButton(image.userID) && 
                                    <IconButton
                                        disabled={handleButton(image.userID)}
                                        color="secondary" aria-label="delete image"
                                        onClick={() => handleDeleteImage(image.id, image.userID, image.name)}
                                        component="span" >
                                        <DeleteForever />
                                    </IconButton>
                                 }
                            </Typography>
                        </div>
                    ))}
            </Grid>
        ))}
</Grid>
}
export default ImageGrid;
1
urchmaney 21 Янв 2021 в 13:30

Нужно просто добавить фигурный браслет и вернуть;

const items = [1,2,3,4,5,6].map(item => {
  if(item > 2){
    return item;
   }
  return -1;
});

console.log(items);
0
Olgun YILDIZ 21 Янв 2021 в 13:19
65828222