【解決方法】{div}をマップ関数に入れる方法は?

プログラミングQA

2023.01.07

製品の JSON ファイルがあり、詳細を div に入れたいと考えています。

2 番目の div (ウィンドウ) はデフォルトで非表示になっているため、{isShown && DIV_CONTENT} 状態が必要です。

ウィンドウの div を divStyle クラスの div と同じマップ関数に入れたいだけです。

私が試したこと：

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">
              Details like obj.title in curly braces
            </div>
            <div className="close">Close</div>
          </div>
          )}
        ))}
      </div>
    </>
  );
}
export default App;

解決策 1

最も簡単な解決策は、return ステートメントに配置する変数を最初に作成することです。

つまり、現在の JSX を保持する変数を作成するということです。

次に、返すものに余分な div が含まれているかどうかを判断できます。

非常に簡単な例:

JavaScript

let mainDiv = <div>my stuff </div>;
let extraDiv = <div> extra stuff</div>;
let targetDivsForReturn = [];

render(){
     targetDivsForReturn.push(mainDiv);
     if (isShown){
        targetDivsForReturn.push(extraDiv);
     }
     return (<>
        {targetDivsForReturn}
      </>)   
}