If statement inside .map()?

Question

I'd like to know how I can implement an if statement inside .map()
See code below.
Currently the delete button is disabled if the image is not uploaded by the current user, but my goal is to not render the delete button at all.

    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;

Answer 1

You can return null as follows:

const imgArray = ['img1', 'img2', 'img3', 'img4', 'img5'];
imgArray.map((item) => { 
  if (item === 'img4') {
    return null;
  }
  return null;
});
return imgArray;

ReactJs will not render null.

Answer 2

What you are looking for is

   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;

Answer 3

you just need to add curly bracelet and return;

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

console.log(items);