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

[dewembas]

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

[Nexus]

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

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

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

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

[Nexus]

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

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)} />
    </>;
}

[dewembas]

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

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

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

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

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

[Nexus]

как сделать одно модальное окно?

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

[dewembas]

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

Упс, спасибо

[dewembas]

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

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

[Nexus]

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

[dewembas]

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

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

[Nexus]

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».

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