{"type":"video","version":"1.0","html":"<iframe src=\"https://www.loom.com/embed/0f3ee78215104e7faaffc6c352bdd407\" frameborder=\"0\" width=\"1728\" height=\"1296\" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>","height":1296,"width":1728,"provider_name":"Loom","provider_url":"https://www.loom.com","thumbnail_height":1296,"thumbnail_width":1728,"thumbnail_url":"https://cdn.loom.com/sessions/thumbnails/0f3ee78215104e7faaffc6c352bdd407-00001.gif","duration":567,"title":"Common Interview for ReactJS","description":"// TODO(s):\n// update this code so that when you click on a user, they are removed from the screen\n// add a number dropdown to fetch a dynamic number of users - for example, now we only fetch 5 users at a time - make it so we can fetch 5, 10 or 15 users based on the dropdown\n\nimport { useEffect, useState } from \"react\";\nimport \"./styles.css\";\n\nexport default function App() {\n  const [users, setUsers] = useState([]);\n\n  const API_URL = \"https://randomuser.me/api/?results=5\";\n\n  const fetchData = async () => {\n    const res = await window.fetch(API_URL);\n    const json = await res.json();\n    setUsers(json.results);\n  };\n\n  useEffect(() => {\n    fetchData();\n  }, []);\n\n  return (\n    <>\n      Users\n      {users.map((user) => (\n        \n          \n          {user.name.first}\n        \n      ))}\n    \n  );\n}"}