Как связать 2 массива данных?

Question

[asqwerty]

Есть 2 массива с данными:
1 массив: массив объектов. Каждый объект - это карточка товара. В этом объекте и хранится первичная информация об этом товаре
2 массив: массив объектов. Каждый объект - это подробная информация о товаре
В карточке товара есть кнопка. Нужно, чтобы при клике на кнопку открывалось модальное окно с информацией именно о том товаре, на котором была нажата кнопка.
Я сделал компонент с модальным окном, оно прекрасно работает.
Я не понимаю: как связать кнопки на карточках товаров с модалками, где хранится подробная информация об этом товаре. Я должен изначально отрисовать все модалки на странице и скрыть их?

Comments

[WbICHA]

Ты не умеешь делать поиск в массиве?

[asqwerty]

WbICHA, умею. Просто я не знаю, как это все организовать. Где там этот поиск делать и т.д.

[WbICHA]

asqwerty, в компоненте.

[asqwerty]

WbICHA, очень понятно

[Владимир]

asqwerty, Плохо что непонятно.
Массив с подробной информацией в каком месте лежит?
Вот в том месте и делай поиск, в результате получаешь один объект и с ним открываешь модалку. Когда закрываешь модалку - очищаешь объект.

[asqwerty]

Владимир, извините, а вы случайно не знаете, где можно почитать про это или посмотреть какой-то пример? Английский, русский без разницы

[Владимир]

asqwerty,
Вообще для начала полностью документацию на офсайте почитать
https://reactjs.org/tutorial/tutorial.html
https://reactjs.org/docs/getting-started.html
Потом можно перечитать
https://reactjs.org/docs/thinking-in-react.html
https://reactjs.org/docs/context.html
https://react-redux.js.org/
И выбрать решение по вкусу.
Я не агитирую ни за стейт в родительском компоненте, ни за контекст ни за редакс, все три метода можно использовать в зависимости от размера сайта и предпочтений.

Поиск по массиву искать тут
https://developer.mozilla.org/en-US/docs/Web/JavaS...

[asqwerty]

Владимир, Спасибо большое. До меня дошло, причем тут поиск и как его использовать. Еще раз спасибо.

Answer 1

[Scoo909010]

Что есть общего у первого и второго массива? Это айдишник, и именно по нему нужно искать выбранный пользователем объект.
При клике на кнопку "Показать подробное описание товара" должен происходить фетч-запрос по типу getCardById(1)
И уже полученный ответ от сервера отрисовывать в модалке.

Если это данные из моков, то можно решить проблему через какой-нибудь filter.

Отрисовывать все модалки на странице не надо, это очень дорого и костыльно.

Comments

[asqwerty]

Огромное спасибо. Теперь я понял, как это сделать благодаря вашему ответу