{"id":9599,"date":"2022-09-19T18:42:12","date_gmt":"2022-09-19T13:12:12","guid":{"rendered":"https:\/\/jassweb.com\/solved\/solved-dont-render-until-data-has-loaded-react-closed\/"},"modified":"2022-09-19T18:42:12","modified_gmt":"2022-09-19T13:12:12","slug":"solved-dont-render-until-data-has-loaded-react-closed","status":"publish","type":"post","link":"https:\/\/jassweb.com\/solved\/solved-dont-render-until-data-has-loaded-react-closed\/","title":{"rendered":"[Solved] Dont render until data has loaded &#8211; react [closed]"},"content":{"rendered":"<p> [ad_1]<br \/>\n<\/p>\n<div id=\"answer-57676008\" class=\"answer js-answer accepted-answer js-accepted-answer\" data-answerid=\"57676008\" data-parentid=\"57675787\" data-score=\"0\" data-position-on-page=\"1\" data-highest-scored=\"1\" data-question-has-accepted-highest-score=\"1\" itemprop=\"acceptedAnswer\" itemscope itemtype=\"https:\/\/schema.org\/Answer\">\n<div class=\"post-layout\">\n<div class=\"votecell post-layout--left\"><\/div>\n<div class=\"answercell post-layout--right\">\n<div class=\"s-prose js-post-body\" itemprop=\"text\">\n<p>You would need your fetch to take place in a parent component. Then, you can render whichever component you want based on the state of fetch. If fetching is done, render the NewComponent. If still fetching, render the CurrentComponent.<\/p>\n<pre><code>import React, { useState } from \"react\";\nimport ReactDOM from \"react-dom\";\n\nconst CurrentComponent = () =&gt; &lt;div&gt;I am current&lt;\/div&gt;;\nconst NewComponent = () =&gt; &lt;div&gt;I am new&lt;\/div&gt;;\n\nconst App = () =&gt; {\n  const [loading, setLoading] = useState(true);\n\n  \/\/ this simulates your fetch\n  setTimeout(() =&gt; {\n    setLoading(false);\n  }, 2000);\n\n  return (\n    &lt;div className=\"App\"&gt;\n      &lt;h1&gt;Hello CodeSandbox&lt;\/h1&gt;\n      &lt;h2&gt;Component:&lt;\/h2&gt;\n      {loading ? &lt;CurrentComponent \/&gt; : &lt;NewComponent \/&gt;}\n    &lt;\/div&gt;\n  );\n};\n\nconst rootElement = document.getElementById(\"root\");\nReactDOM.render(&lt;App \/&gt;, rootElement);\n<\/code><\/pre>\n<h3>Or with React-Router:<\/h3>\n<p>Do your fetch and when your fetch completes use <code>history.push<\/code> to go to your new route. See this post.<\/p>\n<\/p><\/div>\n<div class=\"mt24\"><\/div>\n<\/div>\n<p>            <span class=\"d-none\" itemprop=\"commentCount\">4<\/span> <\/p><\/div>\n<\/div>\n<p>[ad_2]<\/p>\n<p>solved Dont render until data has loaded &#8211; react [closed] <\/p>\n","protected":false},"excerpt":{"rendered":"<p>[ad_1] You would need your fetch to take place in a parent component. Then, you can render whichever component you want based on the state of fetch. If fetching is done, render the NewComponent. If still fetching, render the CurrentComponent. import React, { useState } from &#8220;react&#8221;; import ReactDOM from &#8220;react-dom&#8221;; const CurrentComponent = () &#8230; <a title=\"[Solved] Dont render until data has loaded &#8211; react [closed]\" class=\"read-more\" href=\"https:\/\/jassweb.com\/solved\/solved-dont-render-until-data-has-loaded-react-closed\/\" aria-label=\"More on [Solved] Dont render until data has loaded &#8211; react [closed]\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[320],"tags":[784,1109],"class_list":["post-9599","post","type-post","status-publish","format-standard","hentry","category-solved","tag-reactjs","tag-redux"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>[Solved] Dont render until data has loaded - react [closed] - JassWeb<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/jassweb.com\/solved\/solved-dont-render-until-data-has-loaded-react-closed\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"[Solved] Dont render until data has loaded - react [closed] - JassWeb\" \/>\n<meta property=\"og:description\" content=\"[ad_1] You would need your fetch to take place in a parent component. Then, you can render whichever component you want based on the state of fetch. If fetching is done, render the NewComponent. If still fetching, render the CurrentComponent. import React, { useState } from &quot;react&quot;; import ReactDOM from &quot;react-dom&quot;; const CurrentComponent = () ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jassweb.com\/solved\/solved-dont-render-until-data-has-loaded-react-closed\/\" \/>\n<meta property=\"og:site_name\" content=\"JassWeb\" \/>\n<meta property=\"article:published_time\" content=\"2022-09-19T13:12:12+00:00\" \/>\n<meta name=\"author\" content=\"Kirat\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kirat\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-dont-render-until-data-has-loaded-react-closed\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-dont-render-until-data-has-loaded-react-closed\\\/\"},\"author\":{\"name\":\"Kirat\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#\\\/schema\\\/person\\\/65c9c7b7958150c0dc8371fa35dd7c31\"},\"headline\":\"[Solved] Dont render until data has loaded &#8211; react [closed]\",\"datePublished\":\"2022-09-19T13:12:12+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-dont-render-until-data-has-loaded-react-closed\\\/\"},\"wordCount\":82,\"publisher\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#organization\"},\"keywords\":[\"reactjs\",\"redux\"],\"articleSection\":[\"Solved\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-dont-render-until-data-has-loaded-react-closed\\\/\",\"url\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-dont-render-until-data-has-loaded-react-closed\\\/\",\"name\":\"[Solved] Dont render until data has loaded - react [closed] - JassWeb\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#website\"},\"datePublished\":\"2022-09-19T13:12:12+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-dont-render-until-data-has-loaded-react-closed\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-dont-render-until-data-has-loaded-react-closed\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-dont-render-until-data-has-loaded-react-closed\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"[Solved] Dont render until data has loaded &#8211; react [closed]\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#website\",\"url\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/\",\"name\":\"JassWeb\",\"description\":\"Build High-quality Websites\",\"publisher\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#organization\",\"name\":\"Jass Web\",\"url\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/jassweb.com\\\/wp-content\\\/uploads\\\/2021\\\/02\\\/jass-website-logo-1.png\",\"contentUrl\":\"https:\\\/\\\/jassweb.com\\\/wp-content\\\/uploads\\\/2021\\\/02\\\/jass-website-logo-1.png\",\"width\":693,\"height\":132,\"caption\":\"Jass Web\"},\"image\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#\\\/schema\\\/person\\\/65c9c7b7958150c0dc8371fa35dd7c31\",\"name\":\"Kirat\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/wp-content\\\/litespeed\\\/avatar\\\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1777008400\",\"url\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/wp-content\\\/litespeed\\\/avatar\\\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1777008400\",\"contentUrl\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/wp-content\\\/litespeed\\\/avatar\\\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1777008400\",\"caption\":\"Kirat\"},\"sameAs\":[\"http:\\\/\\\/jassweb.com\"],\"url\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/author\\\/jaspritsinghghumangmail-com\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"[Solved] Dont render until data has loaded - react [closed] - JassWeb","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/jassweb.com\/solved\/solved-dont-render-until-data-has-loaded-react-closed\/","og_locale":"en_US","og_type":"article","og_title":"[Solved] Dont render until data has loaded - react [closed] - JassWeb","og_description":"[ad_1] You would need your fetch to take place in a parent component. Then, you can render whichever component you want based on the state of fetch. If fetching is done, render the NewComponent. If still fetching, render the CurrentComponent. import React, { useState } from \"react\"; import ReactDOM from \"react-dom\"; const CurrentComponent = () ... Read more","og_url":"https:\/\/jassweb.com\/solved\/solved-dont-render-until-data-has-loaded-react-closed\/","og_site_name":"JassWeb","article_published_time":"2022-09-19T13:12:12+00:00","author":"Kirat","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Kirat","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/jassweb.com\/solved\/solved-dont-render-until-data-has-loaded-react-closed\/#article","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/solved-dont-render-until-data-has-loaded-react-closed\/"},"author":{"name":"Kirat","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31"},"headline":"[Solved] Dont render until data has loaded &#8211; react [closed]","datePublished":"2022-09-19T13:12:12+00:00","mainEntityOfPage":{"@id":"https:\/\/jassweb.com\/solved\/solved-dont-render-until-data-has-loaded-react-closed\/"},"wordCount":82,"publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"keywords":["reactjs","redux"],"articleSection":["Solved"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/jassweb.com\/solved\/solved-dont-render-until-data-has-loaded-react-closed\/","url":"https:\/\/jassweb.com\/solved\/solved-dont-render-until-data-has-loaded-react-closed\/","name":"[Solved] Dont render until data has loaded - react [closed] - JassWeb","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/#website"},"datePublished":"2022-09-19T13:12:12+00:00","breadcrumb":{"@id":"https:\/\/jassweb.com\/solved\/solved-dont-render-until-data-has-loaded-react-closed\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jassweb.com\/solved\/solved-dont-render-until-data-has-loaded-react-closed\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/jassweb.com\/solved\/solved-dont-render-until-data-has-loaded-react-closed\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/jassweb.com\/solved\/"},{"@type":"ListItem","position":2,"name":"[Solved] Dont render until data has loaded &#8211; react [closed]"}]},{"@type":"WebSite","@id":"https:\/\/jassweb.com\/solved\/#website","url":"https:\/\/jassweb.com\/solved\/","name":"JassWeb","description":"Build High-quality Websites","publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/jassweb.com\/solved\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/jassweb.com\/solved\/#organization","name":"Jass Web","url":"https:\/\/jassweb.com\/solved\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/","url":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","contentUrl":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","width":693,"height":132,"caption":"Jass Web"},"image":{"@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31","name":"Kirat","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1777008400","url":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1777008400","contentUrl":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1777008400","caption":"Kirat"},"sameAs":["http:\/\/jassweb.com"],"url":"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/"}]}},"_links":{"self":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/9599","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/comments?post=9599"}],"version-history":[{"count":0,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/9599\/revisions"}],"wp:attachment":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/media?parent=9599"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/categories?post=9599"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/tags?post=9599"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}