React нужна помощь
 

Всем привет, мне нужна помощь, есть проект с постерами фильмов, пр нажатии на постер нужно что бы его бэкграунд был изображением постера, но я запутался, не могу понять как сделать что бы к конкретному постеру открывался тот же постер, они у меня открываются все по очереди как сделать открытие по индексу или что то подобное , буду очень благодарен за помощь.
Ссылка на репозиторий : https://github.com/Dewembas/React-moviees

Научитесь форматировать свой код.

Как я понял речь о компоненте Movie.
У вас на каждый фильм рендерится по одной картинке и по изначально скрытому модальному окну.
Видимость всех модалок у вас зависит от одной переменной - «show».

Во-первых, имхо, на каждый элемент необязательно рендерить по модальному окно, можно обойтись вторым.
Во-вторых, при нажатии на любой постер фильма открываются сразу все модальные окна.

Сохраняйте в state не состояние модалки (открыт/закрыт), а индекс открытого окна.
Если у вас как и сейчас останется на каждый фильм по окну, то просто проверяете, что индекс текущего элемента равен "индексу открытого фильма".
Если оставите только одно окно, что правильнее, то просто проверяете, что у вас есть открытый элемент. В этом случае получить сам элемент можно по его известному индексу.

Примерно так:

function Movies() {
    const [items, saveItems] = useState([]);
    const [openItemIndex, saveOpenItemIndex] = useState(null);
    
    return <>
        {items.map((item, index) => (
            <div>
                <img src={item.poster_src} onClick={() => saveOpenItemIndex(index)} />
            </div>
        ))}
        
        <Modal show={Boolean(openItemIndex)} />
    </>;
}

Подскажите пожалуйста еще , как сделать одно модальное окно? Как упоминалось выше

:-? https://javascript.ru/forum/library-...tml#post530177

Упс, спасибо

У меня опять вопрос :( не пойму , а как же сделать бэкграунд я уже вроде все попробовал он пишет undefined, что делать ?:help:

dewembas, сделайте макет вашей задачи в любой песочнице, без него непонятно где у вас undefined.

Не получается создать в песочнеце, фетч запрос не хочет обрабатываться
могу только вот скрин прислать где undefined

dewembas, если ни вы, ни ваш редактор кода форматировать этот самый код не умеете, то можете воспользоваться этим ресурсом: https://prettier.io/playground

В моем примере константы items и saveItems были аналогом ваших переменных data и setData.
Что лежит в константе data без просмотра кода сказать сложно, там может быть что угодно, однако константа items наверняка хранит итерируймый объект и почти наверняка это массив.
Так что либо удалите мою версию, либо исправьте свою.

Ваши константы handleClose и handleShow можете удалить, они лишние как и show вместе с setShow.

39-я строка вашего неформатированного кода: лишний третий аргумент callback'а, переданного в метод map. Он, как я и написал, лишний, к тому же имеет название, которое вводит в заблуждение (useState). Если интересно, что передается третьим аргементом в метод map - смотрите тут.

В 40-й строке замените атрибут onClick на этот:

onClick={() => saveOpenItemIndex(index)}

50-я и 51-я строки должны быть такими:

show={!!openItemIndex}
onHide={() => saveOpenItemIndex(null)}

Строки 45 и 64 - лишние.

В 55-й строке вместо «data?.poster_path» должно быть «data[openItemIndex]?.poster_path».

Вы, похоже, совсем не пытаетесь вникнуть в то, что пишите.