How to link 2 arrays of data?

Question

React

There are 2 arrays with data:
1 array: an array of objects. Each object is a product card. This object stores the primary information about this product
2 array: an array of objects. Each object is detailed information about the product
. There is a button on the product card. It is necessary that when the button is clicked, a modal window opens with information about exactly the product on which the button was clicked.
I made a component with a modal window, it works great.
I don't understand: how to connect buttons on product cards with modals, where detailed information about this product is stored. Should I initially render all modals on the page and hide them?

Answer 1

What do the first and second arrays have in common? This is an ID, and it is by it that you need to search for the object selected by the user.
When clicking on the button "Show detailed product description" a fetch-request of the getCardById(1) type should occur.
And the already received response from the server should be drawn in the modal.
If this is data from mocks, then you can solve the problem through some kind of filter.
It is not necessary to draw all the modals on the page, it is very expensive and a hack.