Наложение при наведении курсора в React, способ JS

Question

Я пытаюсь сделать наложение при наведении курсора на изображения в React с помощью этого урока: w3 school tutorial .

Мой код:

<div className="grid-item" key={movie.id}>
                            <img className="grid-images" alt={movie.title} src={movie.src}>
                                <div className="overlay">{movie.title}</div>
                    </div>

Мое сообщение об ошибке: Parsing error: Expected corresponding JSX closing tag for <img>

Поскольку JSX не позволяет не закрывать тег img, этот метод не работает. Я не могу найти альтернативу, как сделать это в React с помощью CSS. Кто-нибудь? :) Спасибо!

Answer 1

Вам просто нужно самостоятельно закрыть тег img, добавив '/' непосредственно перед>:

<img className="grid-images" alt={movie.title} src={movie.src} />