{"id":2405,"date":"2019-02-27T15:55:19","date_gmt":"2019-02-27T10:25:19","guid":{"rendered":"https:\/\/www.idslogic.com\/blog\/?p=2405"},"modified":"2026-07-02T14:57:34","modified_gmt":"2026-07-02T09:27:34","slug":"bind-data-in-react-js-using-restful-api","status":"publish","type":"post","link":"https:\/\/www.idslogic.com\/blog\/bind-data-in-react-js-using-restful-api","title":{"rendered":"Bind Data in React JS Using RESTful API"},"content":{"rendered":"\n<p><span style=\"font-size: 14pt;\">React makes it easy to create interactive UIs. We can design simple views that are easy to understand and update wherever required. &nbsp;It makes our code more predictable and easier to debug.<\/span><\/p>\n\n\n\n<p><span style=\"font-size: 14pt;\">The following section elaborates the process to bind data on the html page through React JS using REST API.<\/span><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p><span style=\"color: #003366; font-size: 18pt;\"><strong>Libraries Need to be Included:<\/strong><\/span><\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><!--email_off--><span style=\"font-size: 14pt;\">&lt;<span style=\"color: #800000;\">script<\/span> <span style=\"color: #ff0000;\">src<\/span>=&#8221;<span style=\"color: #000080;\">https:\/\/unpkg.com\/react@0.12.2\/dist\/JSXTransformer.js<\/span>&#8221; &gt;&lt;\/<span style=\"color: #800000;\">script<\/span>&gt;<\/span><!--\/email_off--><\/p>\n\n\n\n<p><!--email_off--><span style=\"font-size: 14pt;\">&nbsp; &lt;<span style=\"color: #800000;\">script<\/span> <span style=\"color: #ff0000;\">src<\/span>=&#8221;<span style=\"color: #000080;\">https: \/\/unpkg.com\/react@16\/umd\/react.development.js<\/span>&#8221; &gt;&lt;\/<span style=\"color: #800000;\">script<\/span>&gt;<\/span><!--\/email_off--><\/p>\n\n\n\n<p><!--email_off--><span style=\"font-size: 14pt;\">&nbsp; &lt;<span style=\"color: #800000;\">script<\/span> <span style=\"color: #ff0000;\">src<\/span>=<span style=\"color: #000080;\">https: \/\/unpkg.com\/react-dom@16\/umd\/react-dom.development.js<\/span> &gt;&lt;\/<span style=\"color: #800000;\">script<\/span>&gt;<\/span><!--\/email_off--><\/p>\n<\/blockquote>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p><span style=\"color: #003366; font-size: 14pt;\"><strong>HTML Part<\/strong><\/span><br><span style=\"color: #008000; font-size: 14pt;\">a. Link of jsx file <\/span><\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em><span style=\"font-size: 14pt;\">&lt;<span style=\"color: #800000;\">script<\/span> <span style=\"color: #ff0000;\">type<\/span>=&#8221;<span style=\"color: #000080;\">text\/jsx<\/span>&#8221; <span style=\"color: #ff0000;\">src<\/span>=&#8221;<span style=\"color: #000080;\">JSX\/getData.jsx<\/span>&#8220;&gt;&lt;\/<span style=\"color: #800000;\">script<\/span>&gt;<\/span><\/em><\/p>\n<\/blockquote>\n\n\n\n<p><span style=\"color: #008000; font-size: 14pt;\">b. A div tag to bind all the data <\/span><\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em><span style=\"font-size: 14pt;\">&lt;<span style=\"color: #800000;\">div<\/span> <span style=\"color: #ff0000;\">id<\/span>=&#8221;<span style=\"color: #000080;\">container<\/span>&#8220;&gt;&lt;\/<span style=\"color: #800000;\">div<\/span>&gt;<\/span><\/em><\/p>\n<\/blockquote>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p><span style=\"color: #003366; font-size: 14pt;\"><strong>JSX Code to Fetch Data from API and Bind on the Page (getData.jsx)<\/strong><\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><textarea class=\"xml\" name=\"code\">class&nbsp;define_your_class_name&nbsp;extends&nbsp;React.Component {\n\nconstructor(props) {\n\n&nbsp;&nbsp;super(props);\n\nthis.state = { error:&nbsp;null, isLoaded:&nbsp;false, items: [] };\n\n}\n\ncomponentDidMount() {\n\nfetch(&lt;API path&gt;)\n\n.then(res =&gt; res.json())\n\n.then((result) =&gt; {&nbsp;this.setState({ isLoaded:&nbsp;true, items: result.value });},\n\n(error) =&gt; {&nbsp;this.setState({ isLoaded:&nbsp;true, error }); })\n\n}\n\nrender() {\n\nconst&nbsp;{ error, isLoaded, items } =&nbsp;this.state;\n\nif&nbsp;(error) {return&nbsp;&lt;\/p&gt;\n&lt;div&gt;Error:&nbsp;{error.message}&lt;\/div&gt;\n&lt;p&gt;;\n\n}&nbsp;else&nbsp;{\n\nreturn&nbsp;(\n\n\/\/Bind your item elements as you need\n\n&lt;div&nbsp;id=\u201dtabs\u201d&gt;&lt;p&gt;\n\n{items.map(item =&gt; (\n\n&lt;div&nbsp;key={item.Title}&gt;\n\n&lt;img&nbsp;src={item.ImageUrl}&nbsp;alt={item. ImageAlternativeText} \/&gt;\n\n&lt;\/p&gt;\n&lt;h2&gt;{item.Title}&lt;\/h2&gt;\n&lt;p&gt;\n\n&lt;\/p&gt;\n&lt;p&gt;{item.Description}&lt;\/p&gt;\n&lt;p&gt;\n\n&lt;\/div&gt;\n&lt;p&gt;\n\n))}\n\n&lt;\/div&gt;\n&lt;p&gt;\n\n);\n\n}\n\n}\n\n}\n\nReactDOM.render(&lt;define_your_class_name&nbsp;\/&gt;, document.getElementById(\u2018Pass your div unique id\u2019));\n<\/textarea><\/pre>\n\n\n\n<p><span style=\"color: #003300; font-size: 14pt;\"><strong>Contributed By:<\/strong><\/span><\/p>\n\n\n\n<p><span style=\"font-size: 14pt;\">Bishwajit Mishra<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>React makes it easy to create interactive UIs. We can design simple views that are easy to understand and update wherever required. &nbsp;It makes our code more predictable and easier to debug. The following section elaborates the process to bind&#8230;<\/p>\n","protected":false},"author":1,"featured_media":2406,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[104],"tags":[740,739,741],"class_list":["post-2405","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-development","tag-bind-data-in-react-js","tag-reactjs","tag-restful-api"],"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/www.idslogic.com\/blog\/wp-json\/wp\/v2\/posts\/2405","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.idslogic.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.idslogic.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.idslogic.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.idslogic.com\/blog\/wp-json\/wp\/v2\/comments?post=2405"}],"version-history":[{"count":22,"href":"https:\/\/www.idslogic.com\/blog\/wp-json\/wp\/v2\/posts\/2405\/revisions"}],"predecessor-version":[{"id":12641,"href":"https:\/\/www.idslogic.com\/blog\/wp-json\/wp\/v2\/posts\/2405\/revisions\/12641"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.idslogic.com\/blog\/wp-json\/wp\/v2\/media\/2406"}],"wp:attachment":[{"href":"https:\/\/www.idslogic.com\/blog\/wp-json\/wp\/v2\/media?parent=2405"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.idslogic.com\/blog\/wp-json\/wp\/v2\/categories?post=2405"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.idslogic.com\/blog\/wp-json\/wp\/v2\/tags?post=2405"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}