{"id":3475,"date":"2019-09-30T12:38:49","date_gmt":"2019-09-30T04:38:49","guid":{"rendered":"https:\/\/www.ookangzheng.com\/?p=3475"},"modified":"2020-05-24T15:58:09","modified_gmt":"2020-05-24T07:58:09","slug":"fetching-api-using-react-usestate-and-useeffect","status":"publish","type":"post","link":"https:\/\/www.ookangzheng.com\/fetching-api-using-react-usestate-and-useeffect\/","title":{"rendered":"Fetching API using React useState and useEffect"},"content":{"rendered":"\n<p>ENV: React 16.9, Nodejs 12<br \/>IDE: Visual Studio Code<br \/>OS: Mac OSX<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ RandomPerson.js\n\nexport const RandomPerson = () => {\n const [person, setPerson] = useState()\n useEffect(() => {\n   fetch(\"https:\/\/randomuser.me\/api\")\n     .then(x => x.json())\n     .then(x => setPerson(x))\n }, []) \/\/ Run only on render\n\n return (\n   &lt;div>\n    &lt;pre>\n      {JSON.stringify(person, null, 2)}\n    &lt;\/pre>\n   &lt;\/div>\n )\n}<\/code><\/pre>\n\n\n\n<p>Photo by&nbsp;<a href=\"https:\/\/unsplash.com\/@room?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText\">ROOM<\/a>&nbsp;on&nbsp;<a href=\"https:\/\/unsplash.com\/s\/photos\/call?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText\">Unsplash<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>ENV: React 16.9, Nodejs 12IDE: Visual Studio CodeOS: Mac OSX Photo by&nbsp;ROOM&nbsp;on&nbsp;Unsplash<\/p>\n","protected":false},"author":1,"featured_media":3499,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[33],"tags":[],"class_list":["post-3475","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-front-end"],"_links":{"self":[{"href":"https:\/\/www.ookangzheng.com\/wp-json\/wp\/v2\/posts\/3475","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ookangzheng.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ookangzheng.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ookangzheng.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ookangzheng.com\/wp-json\/wp\/v2\/comments?post=3475"}],"version-history":[{"count":0,"href":"https:\/\/www.ookangzheng.com\/wp-json\/wp\/v2\/posts\/3475\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.ookangzheng.com\/wp-json\/wp\/v2\/media\/3499"}],"wp:attachment":[{"href":"https:\/\/www.ookangzheng.com\/wp-json\/wp\/v2\/media?parent=3475"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ookangzheng.com\/wp-json\/wp\/v2\/categories?post=3475"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ookangzheng.com\/wp-json\/wp\/v2\/tags?post=3475"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}