integrar dados dinâmicos em react.js

Question

Olá, tenho um cartão criado em react e tenho de o tornar dinâmico, criei apenas um componente, mas tenho vários dados para que seja multiplicado pelos dados que enviam

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;

Aqui eu mostro meu código do cartão, isso tem que ser multiplicado toda a parte de baixo Menucom os dados que eu tenho que seria esse

[
{
    "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
  }
]

Por enquanto eles me enviaram apenas um .texto com dados iguais ao que coloquei, se alguém pudesse me ajudar a integrar esses dados ao meu cartão e multiplicá-lo por todos os dados que me enviam, não sei muito sobre integração, se não mais layout

Answer 1

Eu acredito que você está pedindo um método para criar um cartão por item de seu arquivo JSON correto? Nesse caso, recomendo que você pegue tudo relacionado à fabricação do cartão e separe-o em seu próprio componente. Em seguida, você pode importá-lo de volta para o componente do aplicativo, mapear os dados do arquivo JSON e criar o componente do cartão por iteração do loop. Seria algo parecido com o trecho de código abaixo.

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;

Sei que não é uma resposta completa, mas espero que isso o leve na direção certa. Além disso, você deve ler sobre o método map (não deve ser confundido com o método Map) e como levantar o estado. Vou criar um link para os documentos abaixo ....

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

estado de elevação: https://reactjs.org/docs/lifting-state-up.html