I'm new to react and I'm trying to open a new page (think product page on an e-commerce website) with the data on a card component (product card) when it is clicked. The card components get their data from a separate js file using . map() . Could you please give suggestions on how this could be achieved?

CodePudding user response：

Well, If the other page you are saying is opened using the same react app you could use history from react-router, something like history.push(to: 'yourpath', state: { the data you need to give to the other page }), but keep in mind this won't be visible on the URL so the user won't be able to share the URL with that information, another way to get this working is using the search params something like yourwebsite.com/?param=PARAM1 then you can read them with vanilla JS, another way would be adding a param to the route of that new page where you define all the routes something like so when you click on the product you can send the user to that URL with the respective ID then you will have to store your products in a place where you can find them with the id, for example calling an API. I hope this helps.

CodePudding user response：

you can define something like product id and by product id find your target data, use useState and set [setData,Data] state for product card components and onClickHandler to run a function who map your js file and find your target data with defined product id then update data state