CODEWITHSUNDEEP
javascripthtmlreactjs
DGomez
DGomez

Reputation: 399

integrate dynamic data in react.js

hello I have a card created in react to which I have to make it dynamic, I have created only one component, but I have several data so that it is multiplied with the data they send

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;

Here I show my code of the card, this has to be multiplied all the lower part of Menu with the data that I have that would be this

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

For now they have sent me only a .text with data the same as the one I have put, if someone could help me to integrate that data to my card and multiply it with all the data they send me, I don't know much about integration if not more layout

Upvotes: 0

Views: 172

Answers (1)

Hunter Campbell
Hunter Campbell

Reputation: 56

I believe you are asking for a method to create a card per item from your JSON file correct? If so I would recommend you take everything related to making the card and seperate it to its own component. Then you can import it back into your App component, map through your data from your JSON file and create your card component per iteration of the loop. It would look something like the code snippet below.

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;

I know it's not a full answer but hopefully this will turn you to the right direction. Also, you should read up on the map method (not to be confused with the Map method) and how to lift up state. I'll link to docs below....

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

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

Upvotes: 1

Related Questions