integrate dynamic data in react.js

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

CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top