mengintegrasikan data dinamis di react.js

Question

halo saya punya kartu yang dibuat sebagai reaksi yang saya harus membuatnya dinamis, saya hanya membuat satu komponen, tetapi saya memiliki beberapa data sehingga dikalikan dengan data yang mereka kirim

function App() {
  const [open, setOpen] = useState(false);

  const trigger = useRef(null);

  useEffect(() => {
    if (trigger.current) {
      trigger.current.style.transition = "0.35s";
    }
  }, [trigger]);

  function toggleOpen() {
    if (trigger.current) {
      setOpen((open) => !open);
      if (open) {
        trigger.current.style.webkitTransform = "rotate(0deg)";
      } else {
        trigger.current.style.webkitTransform = "rotate(180deg)";
      }
    }
  }
  const [metadata, setMetadata] = useState([]);
  const data = response.json();
  setMetadata(data);

  return (
    <div className="w-full ">
      <Menu />
      <div className="w-full flex justify-center px-4 py-3">
        <div className="flex w-3/12 px-2 items-center">
          <div className="w-24 p-2 bg-gray-300 mr-4 rounded">
            <img src={logo} className="" alt="" />
          </div>
          <div className="flex flex-col justify-center ">
            <p className="font-semibold my-0">{name}</p>
            <p className="text-xs my-0">
              {address}
            </p>
          </div>
        </div>
        <div className="flex w-1/6 justify-center items-center px-2">
          <div className="w-4/5 h-10 bg-green-600 rounded text-white font-bold flex justify-center items-center">
            <p className="my-0 text-lg">{percentage}</p>
          </div>
        </div>
        <div className="flex w-1/12 justify-center">
          <Chart />
        </div>
        <div className="flex  w-1/6 justify-center items-center font-semibold">
          <p className="my-0 text-lg">{visits}</p>
        </div>
        <div className="flex justify-center items-center font-semibold w-1/6">
          <p className="my-0 text-lg">{conglomerations} Alertas</p>
        </div>
        <div className="flex justify-center items-center font-semibold w-1/6 ">
          <p className="my-0 text-lg">{occupancy} Alertas</p>
        </div>
        <div className="card flex justify-center items-center w-1/6">
          <Button className="mr-3">Analytics</Button>
          <Button>Alerts</Button>
        </div>
        <div className="w-1/12 flex justify-center items-center">
          <span
            ref={trigger}
            onClick={toggleOpen}
            className=" w-4/12 flex justify-center items-center"
          >
            <BsChevronUp className=" text-2xl" />
          </span>
        </div>
      </div>
      <Info open={open} />
    </div>
  );
}

export default App;

Di sini saya menunjukkan kode kartu saya, ini harus dikalikan semua bagian bawah Menudengan data yang saya miliki yang akan menjadi ini

[
{
    "name": "Samantha White",
    "id": "484567489sda",
    "address": "4116 Barton Creek Boulevard Austin, TX 78735 USA",
    "logo": "https://sssssss.s3.amazonaws.com/ssss/express.png",
    "occupancy": {
      "capacity": 150,
      "occupancy": 0,
      "percentage": 0
    },
    "alerts": {
      "conglomerations": 0,
      "occupancy": 0
    },
    "visits": 2721
  },
  {
    "name": "Jacqueline Wells",
    "id": "sdasdx45616a4dsa5",
    "address": "s15035 Highview Road Grand Junction, CO 81504 USA",
    "store_logo": "ssssss.s3.amazonaws.com/ssss/lider.png",
    "occupancy": {
      "capacity": 150,
      "occupancy": 0,
      "percentage": 0
    },
    "alerts": {
      "conglomerations": 0,
      "occupancy": 0
    },
    "visits": 2069
  }
]

Untuk saat ini mereka hanya mengirimi saya teks dengan data yang sama dengan yang saya masukkan, jika seseorang dapat membantu saya mengintegrasikan data itu ke kartu saya dan menggandakannya dengan semua data yang mereka kirimkan kepada saya, saya tidak tahu banyak tentang integrasi jika tidak lebih banyak tata letak

Answer 1

Saya yakin Anda meminta metode untuk membuat kartu per item dari file JSON Anda benar? Jika demikian, saya akan merekomendasikan Anda mengambil semua yang berhubungan dengan pembuatan kartu dan memisahkannya ke komponennya sendiri. Kemudian Anda dapat mengimpornya kembali ke komponen App Anda, memetakan melalui data Anda dari file JSON Anda dan membuat komponen kartu Anda per iterasi loop. Ini akan terlihat seperti cuplikan kode di bawah ini.

function App() {
  const [open, setOpen] = useState(false);

  const trigger = useRef(null);

  useEffect(() => {
    if (trigger.current) {
      trigger.current.style.transition = "0.35s";
    }
  }, [trigger]);

  function toggleOpen() {
    if (trigger.current) {
      setOpen((open) => !open);
      if (open) {
        trigger.current.style.webkitTransform = "rotate(0deg)";
      } else {
        trigger.current.style.webkitTransform = "rotate(180deg)";
      }
    }
  }
  const [metadata, setMetadata] = useState([]);
  const data = response.json();
  setMetadata(data);

  return (
    <div className="w-full ">
      <Menu />
        {data.map(idx => (
          <Card idx={idx.props} />
        ))}
      <Info open={open} />
    </div>
  );
}

export default App;

Saya tahu ini bukan jawaban lengkap tetapi mudah-mudahan ini akan mengarahkan Anda ke arah yang benar. Juga, Anda harus membaca tentang metode peta (jangan bingung dengan metode Peta) dan cara mengangkat status. Saya akan menautkan ke dokumen di bawah ....

peta: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

status pengangkatan: https://reactjs.org/docs/lifting-state-up.html