Click here to Skip to main content
15,616,585 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
I use a map function to list products. There is a Details button in that div. There are 30 products in the JSON file. The products are listed properly.
But if I click the Details button in the window showed only the last 30th id of the products.

What I want:
When I click the n-th product shows the n-th id in the details id="window".

GitHub - folza1/react-modulzaro[^]

Could you solve this?

What I have tried:

import "./App.css";
import cart from "./cart.jpg";
import { useState } from "react";

var data = require("./data.json");

function App() {
  const [isShown, setIsShown] = useState(false);

  const handleClick = (event) => {

  const handleClickClose = (event) => {

  return (
      <div id="main">
        { => (
          <div className="divStyle" key={}>
              style={{ backgroundImage: `url(${obj.thumbnail})` }}
            <div id="product">
              <div id="title">
              <div id="price">
                  backgroundImage: `url(${cart})`,
            <div id="reszletek">
              <button id="buttonDetails" onClick={handleClick}>
            {isShown && (
              <div id="window" onClick={handleClickClose}>
                <div className="details">{}</div>
                <div className="close">Close</div>
export default App;

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900