Click here to Skip to main content
15,884,080 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
I have products in the divStyle div and product details in the window div.

The window must open when you click the Details button and contain the product description of the divStyle product. The problem is that the window div is outside the map function.
When I put the window div into the end of the map function because of the isShown curly braces it does not work.

So how can I return the same product description as the clicked product with the use map?

Git link:

GitHub - folza1/react-modulzaro[^]

What I have tried:

JavaScript
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) => {
    setIsShown(true);
  };

  const handleClickClose = (event) => {
    setIsShown(false);
  };

  return (
    <>
      <h1>Termékek</h1>
      <div id="main">
        {data.map((obj) => (
          <div className="divStyle" key={obj.id}>
            <div
              id="thumbNail"
              style={{ backgroundImage: `url(${obj.thumbnail})` }}
            ></div>
            <div id="product">
              <div id="title">
                <p>{obj.title}</p>
              </div>
              <div id="price">
                <p>${obj.price}</p>
              </div>
              <div
                id="cart"
                style={{
                  backgroundImage: `url(${cart})`,
                }}
              ></div>
            </div>
            <div id="reszletek">
              <button id="buttonDetails" onClick={handleClick}>
                Details
              </button>
            </div>
          </div>
        ))}
        {isShown && (
          <div id="window" onClick={handleClickClose}>
            <div className="details">{obj.description}</div>
            <div className="close">Close</div>
          </div>
        )}
      </div>
    </>
  );
}
export default App;
Posted
Updated 7-Jan-23 13:49pm

1 solution

If you want to reuse, create it as a component. Components are reusable.
 
Share this answer
 
Comments
folza 8-Jan-23 10:16am    
How do you say exactly? If I {isShown Window} is a component I get an error message. Could you write a working example?
Graeme_Grant 8-Jan-23 14:51pm    
Here is a Google Search with many examples: react component example - Google Search[^]

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