Question 210777 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to add a border to the selected Image in ImageList of the MaterialUI component?

I have displayed the images in a grid using the and components of MaterialUI. I want another functionality that when a particular image is selected/clicked on, from the displayed Image grid, i need a border to be displayed around the selected image to indicate to the user which image he has selected. I have tried using useState to store the id. But unable to complete the full code, on how to add the CSS. Need help as using MUI for the first time.
I have add the code below.

import React, { useState } from 'react';
import { ImageList, ImageListItem, Box } from '@mui/material';

export const ImageGrid = () => {
    const [selectedImage, setSelectedImage] = useState("");
    const handleClick = (id: string) => {
        console.log(id);
        console.log('Image clicked');
        setSelectedImage(id);
      };
  return (
    <div>
        <div>
            Image Grid
        </div>
        <ImageList sx={{ width: 500, height: 500 }} cols={3} rowHeight={164} gap={10}>
        {itemData.map((item) => (
            <ImageListItem key={item.img}>
            <img
                src={item.img}
                srcSet={item.img}
                alt={item.title}
                loading="lazy"
                onClick={() => handleClick(item.title)}
            />
            </ImageListItem>
        ))}
        </ImageList>
    </div>
  )
}

const itemData = [
    {
      img: 'https://images.unsplash.com/photo-1551963831-b3b1ca40c98e',
      title: 'Breakfast',
    },
    {
      img: 'https://images.unsplash.com/photo-1551782450-a2132b4ba21d',
      title: 'Burger',
    },
    {
      img: 'https://images.unsplash.com/photo-1522770179533-24471fcdba45',
      title: 'Camera',
    },
    {
      img: 'https://images.unsplash.com/photo-1444418776041-9c7e33cc5a9c',
      title: 'Coffee',
    },
    {
      img: 'https://images.unsplash.com/photo-1533827432537-70133748f5c8',
      title: 'Hats',
    },
    {
      img: 'https://images.unsplash.com/photo-1558642452-9d2a7deb7f62',
      title: 'Honey',
    },
    {
      img: 'https://images.unsplash.com/photo-1516802273409-68526ee1bdd6',
      title: 'Basketball',
    },
    {
      img: 'https://images.unsplash.com/photo-1518756131217-31eb79b20e8f',
      title: 'Fern',
    },
    {
      img: 'https://images.unsplash.com/photo-1597645587822-e99fa5d45d25',
      title: 'Mushrooms',
    },
    {
      img: 'https://images.unsplash.com/photo-1567306301408-9b74779a11af',
      title: 'Tomato basil',
    },
    {
      img: 'https://images.unsplash.com/photo-1471357674240-e1a485acb3e1',
      title: 'Sea star',
    },
    {
      img: 'https://images.unsplash.com/photo-1589118949245-7d38baf380d6',
      title: 'Bike',
    },
  ];
Tags:

2

Answers


  1. 0

    You can add a border to the selected image using the sx prop.

    For example:

    <ImageListItem
  key={item.img}
  sx={{
    ...(item.title === selectedImage ? { border: "5px solid black" } : {}),
  }}
>
    /* ... */
</ImageListItem>
    Login or Signup to reply.
  2. 0

    You can also use "style" prop

    Quote from When should I use style instead of sx prop in Material-UI? :
    "Put your dynamic styles(the ones that change based on some variable) in the
    style prop, and put all the static styles in the sx prop"

      <ImageListItem
     key={item.img}
     style={
       selectedImage === item.title ? { border: "5px solid black" } : {}
     }
  >
    /* Your image */
</ImageListItem>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search