error in popover done in react with material ui

Question

I have a component done in React that has 6 experiences and each experience creates a popover with an array of images. I make the popover using material ui, the popover works but I have a couple of errors in the console and don't know how to fix them.

this is my component

const Experiences = memo(
  (props) => {
    const { className } = props;
    const classes = useStyles(props);

    const [anchorEl, setAnchorEl] = React.useState(null);

    const handleClick = (event) => {
      setAnchorEl(event.currentTarget);
    };

    const open = Boolean(anchorEl);

    const experience = (img, title, category, id, popoverCategory, open) => (
      <div
        className="experience"
        aria-describedby={id}
        id={id}
        onClick={handleClick}
      >
        <img
          data-sizes="auto"
          className="lazyload"
          data-src={img}
          alt={title}
        />
        <div className="experience-title">
          <Typography
            color="textSecondary"
            variant="subtitle2"
            className="highlight highlight1"
            display="inline"
          >
            { title }
          </Typography>
        </div>

        <Popper
          id={id}
          open={anchorEl && anchorEl.id === id}
          anchorEl={anchorEl}
        >
          <div className={classes.paper}>
            {
              popoverCategory.map(url => (
                <img
                  data-sizes="auto"
                  className="lazyload"
                  data-src={popoverCategory}
                  alt="Puntospoint"
                />
              ))
            }
          </div>
        </Popper>
      </div>

    );


    return (

      <div className={clsx(classes.root, className)}>
        <div className="experiences-column col1">
          {experience(gastronomia, 'GASTRONOMÍA', 'gastronomia', 'gastronomia', gastronomiaExperiences, open)}
          {experience(giftcard, 'GIFT CARD', 'giftcard', 'giftcard', giftcardExperiences, open)}
          {experience(deporte, 'DEPORTE', 'deporte', 'deporte', deporteExperiences, open)}
        </div>
        <div className="experiences-column col2">
          {experience(productos, 'PRODUCTOS', 'productos', 'productos', productosExperiences, open)}
          {experience(diversion, 'DIVERSIÓN', 'diversion', 'diversion', diversionExperiences, open)}
          {experience(belleza, 'BELLEZA', 'belleza', 'belleza', bellezaExperiences, open)}
        </div>
      </div>

    );
  },
);

These are the errors

this is the first time I use material ui and I am new to react so I am a bit lost.

Answer 1

The first warning about unique keys is usually caused by using Array.map somewhere and not providing a key to the elements that are produced. In your case it's here:

<div className={classes.paper}>
  {
    popoverCategory.map(url => (
      <img
        data-sizes="auto"
        className="lazyload"
        data-src={popoverCategory}
        alt="Puntospoint"
      />
    ))
  }
</div>

So you're creating a bunch of img tags without keys. It's probably fine to do this in your case, but best practice is to provide keys so that if you remove, add or re-order elements then you won't get unexpected behaviour. The fix is easy:

<div className={classes.paper}>
  {
    popoverCategory.map((url, key) => (
      <img
        data-sizes="auto"
        className="lazyload"
        data-src={popoverCategory}
        alt="Puntospoint"
        {...key}
      />
    ))
  }
</div>

The second problem is here:

 <Popper
   id={id}
   open={anchorEl && anchorEl.id === id}
   anchorEl={anchorEl}
  >

If anchorEl is not defined then you are trying to assign undefined to open, which is disallowed by the propType defined somewhere. It looks like it should be true or false only - if so, you can fix it in any way that forces the result of the condition to be true or false but not undefined, such as anchorEl ? anchorEl.id === id : false or anchorEl && anchorEl.id === id || false.

Answer 2

Official React documentation is a great source of knowledge for beginners - please make use of it (https://reactjs.org/docs/getting-started.html).

As for the errors.

'key' error: https://reactjs.org/docs/lists-and-keys.html

Basically, each time you define children of the component via iteration over the list of something, as you do here: popoverCategory.map(url => (, you need to supply a 'key' attribute that will help React optimize rendering.

'open prop' error: https://material-ui.com/api/popper/

As you can see 'open' is a required property, so Popper component expects you to pass something in it. Because of the way you composed your condition: anchorEl && anchorEl.id === id, your 'open' propertyis populated with null, because if anchorEl is null then result of the && operator is also null. And your anchorEl is null, because you set it to null, when you initialize it as part of the state of your component.