{"id":155334,"date":"2021-01-15T16:00:53","date_gmt":"2021-01-15T13:00:53","guid":{"rendered":"https:\/\/en.buradabiliyorum.com\/what-are-presentational-and-container-components-in-react-cloudsavvy-it\/"},"modified":"2021-01-15T16:00:53","modified_gmt":"2021-01-15T13:00:53","slug":"what-are-presentational-and-container-components-in-react-cloudsavvy-it","status":"publish","type":"post","link":"https:\/\/buradabiliyorum.com\/en\/what-are-presentational-and-container-components-in-react-cloudsavvy-it\/","title":{"rendered":"#What Are Presentational and Container Components in React? \u2013 CloudSavvy IT"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_84 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-6a23e6f6dfee2\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #dd3333;color:#dd3333\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #dd3333;color:#dd3333\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-6a23e6f6dfee2\" checked aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/buradabiliyorum.com\/en\/what-are-presentational-and-container-components-in-react-cloudsavvy-it\/#Is_There_Any_State\" >Is There Any State?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/buradabiliyorum.com\/en\/what-are-presentational-and-container-components-in-react-cloudsavvy-it\/#Looking_at_Examples\" >Looking at Examples<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/buradabiliyorum.com\/en\/what-are-presentational-and-container-components-in-react-cloudsavvy-it\/#Characteristics_of_Each_Type\" >Characteristics of Each Type<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/buradabiliyorum.com\/en\/what-are-presentational-and-container-components-in-react-cloudsavvy-it\/#Advantages_of_Separating_Presentational_and_Container_Components\" >Advantages of Separating Presentational and Container Components<\/a><\/li><\/ul><\/nav><\/div>\n<p><strong>&#8220;#What Are Presentational and Container Components in React? \u2013 CloudSavvy IT&#8221;<\/strong><\/p>\n<div id=\"article-content-area\">\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8770\" src=\"https:\/\/www.cloudsavvyit.com\/thumbcache\/0\/0\/320fa525975dcd73d87d71de862f3009\/p\/uploads\/2021\/01\/24b43beb.jpg\" alt=\"React logo on a dark background\" width=\"1602\" height=\"902\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>React has a component-based architecture that encourages you to split your codebase into reusable units of functionality. Not all components are created equal though. Let\u2019s look at the differences between two common types, Presentational and Container (also known as \u201cStateful\u201d) components.<\/p>\n<h2 id=\"is-there-any-state\"><span class=\"ez-toc-section\" id=\"Is_There_Any_State\"><\/span>Is There Any State?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>To begin with, it should be stressed that these terms don\u2019t refer to any specific React feature. They describe a style of writing React components which helps to maintain modularity and separate out concerns. The existence of the two component types arises from choices made in your codebase.<\/p>\n<p>There\u2019s only one distinguishing factor: container components have state and presentational components do not. In practice, this means that a container component always makes a call to React\u2019s <code>setState()<\/code> method. A presentational component will never make use of state.<\/p>\n<h2 id=\"looking-at-examples\"><span class=\"ez-toc-section\" id=\"Looking_at_Examples\"><\/span>Looking at Examples<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Here\u2019s a simple presentational component:<\/p>\n<div class=\"wp-geshi-highlight-wrap5\">\n<div class=\"wp-geshi-highlight-wrap4\">\n<div class=\"wp-geshi-highlight-wrap3\">\n<div class=\"wp-geshi-highlight-wrap2\">\n<div class=\"wp-geshi-highlight-wrap\">\n<div class=\"wp-geshi-highlight\">\n<div class=\"javascript\">\n<pre class=\"de1\"><span class=\"kw5\">import<\/span> React from <span class=\"st0\">\"react\"<\/span><span class=\"sy0\">;<\/span>\n\u00a0\n<span class=\"kw5\">class<\/span> Presentational <span class=\"kw5\">extends<\/span> React.<span class=\"me1\">Component<\/span> <span class=\"br0\">{<\/span>\n\u00a0\n    render<span class=\"br0\">(<\/span><span class=\"br0\">)<\/span> <span class=\"br0\">{<\/span>\n        <span class=\"kw1\">return<\/span> <span class=\"sy0\">&lt;<\/span>h1<span class=\"sy0\">&gt;<\/span><span class=\"br0\">{<\/span><span class=\"kw1\">this<\/span>.<span class=\"me1\">props<\/span>.<span class=\"me1\">title<\/span><span class=\"br0\">}<\/span><span class=\"sy0\">&lt;\/<\/span>h1<span class=\"sy0\">&gt;;<\/span>\n    <span class=\"br0\">}<\/span>\n\u00a0\n<span class=\"br0\">}<\/span>\n\u00a0\n<span class=\"kw5\">export<\/span> <span class=\"kw1\">default<\/span> Presentational<span class=\"sy0\">;<\/span><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p>The component is extremely simple. It renders a single <code>h1<\/code> tag which displays text passed into the component via its <code>title<\/code> prop. Let\u2019s now look at a stateful container component:<\/p>\n<div class=\"wp-geshi-highlight-wrap5\">\n<div class=\"wp-geshi-highlight-wrap4\">\n<div class=\"wp-geshi-highlight-wrap3\">\n<div class=\"wp-geshi-highlight-wrap2\">\n<div class=\"wp-geshi-highlight-wrap\">\n<div class=\"wp-geshi-highlight\">\n<div class=\"javascript\">\n<pre class=\"de1\"><span class=\"kw5\">import<\/span> React from <span class=\"st0\">\"react\"<\/span><span class=\"sy0\">;<\/span>\n\u00a0\n<span class=\"kw5\">class<\/span> Container <span class=\"kw5\">extends<\/span> React.<span class=\"me1\">Component<\/span> <span class=\"br0\">{<\/span>\n\u00a0\n    constructor<span class=\"br0\">(<\/span>props<span class=\"br0\">)<\/span> <span class=\"br0\">{<\/span>\n        <span class=\"kw5\">super<\/span><span class=\"br0\">(<\/span>props<span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n\u00a0\n        <span class=\"kw1\">this<\/span>.<span class=\"me1\">state<\/span> <span class=\"sy0\">=<\/span> <span class=\"br0\">{<\/span>\n\u00a0\n            time<span class=\"sy0\">:<\/span> <span class=\"br0\">(<\/span><span class=\"kw1\">new<\/span> <span class=\"kw4\">Date<\/span><span class=\"br0\">(<\/span><span class=\"br0\">)<\/span><span class=\"br0\">)<\/span>.<span class=\"me1\">toString<\/span><span class=\"br0\">(<\/span><span class=\"br0\">)<\/span>\n\u00a0\n        <span class=\"br0\">}<\/span><span class=\"sy0\">;<\/span>\n\u00a0\n    <span class=\"br0\">}<\/span>\n\u00a0\n\u00a0\n    componentDidMount<span class=\"br0\">(<\/span><span class=\"br0\">)<\/span> <span class=\"br0\">{<\/span>\n        setInterval<span class=\"br0\">(<\/span><span class=\"br0\">(<\/span><span class=\"br0\">)<\/span> <span class=\"sy0\">=&gt;<\/span> <span class=\"br0\">{<\/span>\n            <span class=\"kw1\">this<\/span>.<span class=\"me1\">setState<\/span><span class=\"br0\">(<\/span><span class=\"br0\">{<\/span>time<span class=\"sy0\">:<\/span> <span class=\"br0\">(<\/span><span class=\"kw1\">new<\/span> <span class=\"kw4\">Date<\/span><span class=\"br0\">(<\/span><span class=\"br0\">)<\/span><span class=\"br0\">)<\/span>.<span class=\"me1\">toString<\/span><span class=\"br0\">(<\/span><span class=\"br0\">)<\/span><span class=\"br0\">}<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n        <span class=\"br0\">}<\/span><span class=\"sy0\">,<\/span> <span class=\"nu0\">1000<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n    <span class=\"br0\">}<\/span>\n\u00a0\n\u00a0\n    render<span class=\"br0\">(<\/span><span class=\"br0\">)<\/span> <span class=\"br0\">{<\/span>\n        <span class=\"kw1\">return<\/span> <span class=\"sy0\">&lt;<\/span>h1<span class=\"sy0\">&gt;<\/span><span class=\"br0\">{<\/span><span class=\"kw1\">this<\/span>.<span class=\"me1\">state<\/span>.<span class=\"me1\">time<\/span><span class=\"br0\">}<\/span><span class=\"sy0\">&lt;\/<\/span>h1<span class=\"sy0\">&gt;;<\/span>\n    <span class=\"br0\">}<\/span>\n\u00a0\n<span class=\"br0\">}<\/span>\n\u00a0\n<span class=\"kw5\">export<\/span> <span class=\"kw1\">default<\/span> Container<span class=\"sy0\">;<\/span><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p>The container component\u2019s <code>render<\/code> method is almost identical to that in the presentational component. The difference is the container component sources its text from inside itself, instead of relying on an outside value passed in as a prop.<\/p>\n<p>Each second, the container component calls <code>setState()<\/code> to update the <code>time<\/code> key in its state. This causes React to re-render the component and display the new time. Our container possesses its own state.<\/p>\n<h2 id=\"characteristics-of-each-type\"><span class=\"ez-toc-section\" id=\"Characteristics_of_Each_Type\"><\/span>Characteristics of Each Type<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Several unique characteristics tend to arise within both presentational and container components. Looking at presentational components first, the bulk of their code is likely to exist within the <code>render<\/code> method. They\u2019ll contain very little logic as their behaviour is defined by the outside world.<\/p>\n<p>Presentational components are blissfully unaware of where their data is coming from. They don\u2019t know when (or whether) it will change. Some examples may not even accept props. Here\u2019s a decorational element which simply renders a specific image file:<\/p>\n<p><code>export () =&gt; &lt;img src=\"https:\/\/www.cloudsavvyit.com\/logo.png\" \/&gt;<\/code><\/p>\n<p>Container components are much the opposite of their presentational counterparts. You\u2019ll typically find most of your site\u2019s logic ends up within a container component. The <code>render<\/code> method may be comparatively short as you\u2019ll be spending many more lines fetching data from external sources, transforming it to suit your needs and then storing it into state.<\/p>\n<p>A container component\u2019s <code>render<\/code> method could consist of a single line that renders a presentational component. You\u2019ve now got strong separation of concerns, with both components having a distinct role that fully respects the other\u2019s. The container component sources the data; the presentational component puts it on the screen.<\/p>\n<p>Here\u2019s how this looks in practice:<\/p>\n<div class=\"wp-geshi-highlight-wrap5\">\n<div class=\"wp-geshi-highlight-wrap4\">\n<div class=\"wp-geshi-highlight-wrap3\">\n<div class=\"wp-geshi-highlight-wrap2\">\n<div class=\"wp-geshi-highlight-wrap\">\n<div class=\"wp-geshi-highlight\">\n<div class=\"javascript\">\n<pre class=\"de1\"><span class=\"kw5\">import<\/span> React from <span class=\"st0\">\"react\"<\/span><span class=\"sy0\">;<\/span>\n\u00a0\n<span class=\"kw1\">const<\/span> View <span class=\"sy0\">=<\/span> <span class=\"br0\">(<\/span><span class=\"br0\">{<\/span>title<span class=\"sy0\">,<\/span> body<span class=\"br0\">}<\/span><span class=\"br0\">)<\/span> <span class=\"sy0\">=&gt;<\/span> <span class=\"br0\">(<\/span>\n    <span class=\"sy0\">&lt;<\/span>div<span class=\"sy0\">&gt;<\/span>\n        <span class=\"sy0\">&lt;<\/span>h1<span class=\"sy0\">&gt;<\/span><span class=\"br0\">{<\/span>title<span class=\"br0\">}<\/span><span class=\"sy0\">&lt;\/<\/span>h1<span class=\"sy0\">&gt;<\/span>\n        <span class=\"sy0\">&lt;<\/span>p<span class=\"sy0\">&gt;<\/span><span class=\"br0\">{<\/span>body<span class=\"br0\">}<\/span><span class=\"sy0\">&lt;\/<\/span>p<span class=\"sy0\">&gt;<\/span>\n    <span class=\"sy0\">&lt;\/<\/span>div<span class=\"sy0\">&gt;<\/span>\n<span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n\u00a0\n<span class=\"kw5\">class<\/span> BlogPostComponent <span class=\"kw5\">extends<\/span> React.<span class=\"me1\">Component<\/span> <span class=\"br0\">{<\/span>\n\u00a0\n    constructor<span class=\"br0\">(<\/span>props<span class=\"br0\">)<\/span> <span class=\"br0\">{<\/span>\n        <span class=\"kw5\">super<\/span><span class=\"br0\">(<\/span>props<span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n\u00a0\n        <span class=\"kw1\">this<\/span>.<span class=\"me1\">state<\/span> <span class=\"sy0\">=<\/span> <span class=\"br0\">{<\/span>\n\u00a0\n            blog<span class=\"sy0\">:<\/span> <span class=\"kw2\">null<\/span>\n\u00a0\n        <span class=\"br0\">}<\/span><span class=\"sy0\">;<\/span>\n\u00a0\n    <span class=\"br0\">}<\/span>\n\u00a0\n\u00a0\n    componentDidMount<span class=\"br0\">(<\/span><span class=\"br0\">)<\/span> <span class=\"br0\">{<\/span>\n        fetch<span class=\"br0\">(<\/span><span class=\"st0\">\"\/blog-post.json\"<\/span><span class=\"br0\">)<\/span>\n            .<span class=\"me1\">then<\/span><span class=\"br0\">(<\/span>response <span class=\"sy0\">=&gt;<\/span> response.<span class=\"me1\">json<\/span><span class=\"br0\">(<\/span><span class=\"br0\">)<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n            .<span class=\"me1\">then<\/span><span class=\"br0\">(<\/span>blog <span class=\"sy0\">=&gt;<\/span> <span class=\"kw1\">this<\/span>.<span class=\"me1\">setState<\/span><span class=\"br0\">(<\/span><span class=\"br0\">{<\/span>blog<span class=\"br0\">}<\/span><span class=\"br0\">)<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n    <span class=\"br0\">}<\/span>\n\u00a0\n\u00a0\n    render<span class=\"br0\">(<\/span><span class=\"br0\">)<\/span> <span class=\"br0\">{<\/span>\n        <span class=\"kw1\">return<\/span> <span class=\"br0\">(<\/span>\n            <span class=\"sy0\">&lt;<\/span>View\n                title<span class=\"sy0\">=<\/span><span class=\"br0\">{<\/span><span class=\"kw1\">this<\/span>.<span class=\"me1\">state<\/span>.<span class=\"me1\">blog<\/span>.<span class=\"me1\">headline<\/span><span class=\"br0\">}<\/span>\n                body<span class=\"sy0\">=<\/span><span class=\"br0\">{<\/span><span class=\"kw1\">this<\/span>.<span class=\"me1\">state<\/span>.<span class=\"me1\">blog<\/span>.<span class=\"me1\">content<\/span><span class=\"br0\">}<\/span> <span class=\"sy0\">\/&gt;<\/span>\n        <span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n    <span class=\"br0\">}<\/span>\n\u00a0\n<span class=\"br0\">}<\/span><span class=\"br0\">}<\/span><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p><code>BlogPostComponent<\/code> is our container component. It loads a post over the network. The data then gets given to the <code>View<\/code> component for rendering. <code>View<\/code> doesn\u2019t care where it gets its data from \u2013 in the future, we could reuse it to display posts fetched from a third-party API such as <a href=\"https:\/\/buradabiliyorum.com\/en\/category\/social-mediaa\/\" data-internallinksmanager029f6b8e52c=\"1\" title=\"Social Media\" target=\"_blank\" rel=\"noopener\">Facebook<\/a> or Twitter.<\/p>\n<p>Container components are so called because they tend to encapsulate entire functional areas of your <a href=\"https:\/\/buradabiliyorum.com\/en\/category\/download-scripts-themes-apps\/\" data-internallinksmanager029f6b8e52c=\"9\" title=\"Download Scripts &amp; Themes &amp; Apps\" target=\"_blank\" rel=\"noopener\">app<\/a>. They make your project work and represent the app\u2019s backend systems.<\/p>\n<p>In a real codebase, <code>BlogPostComponent<\/code> would have even more responsibility. It would need to track whether the post has loaded and handle errors during the network fetch. Consequently, the <code>render<\/code> method may incorporate some basic logic to alter what gets displayed \u2013 either an error message, a progress bar or our presentational <code>View<\/code> component. Presentational components never have any greater responsibility than rendering a specific section of the UI into the DOM.<\/p>\n<h2 id=\"advantages-of-separating-presentational-and-container-components\"><span class=\"ez-toc-section\" id=\"Advantages_of_Separating_Presentational_and_Container_Components\"><\/span>Advantages of Separating Presentational and Container Components<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Using this pattern helps you to organise your codebase and prevents components from becoming too unwieldy. Although it\u2019s not a hard-and-fast rule, diligent separation of the two types improves maintainability as your project\u2019s component count grows.<\/p>\n<p>Try to look for opportunities to refactor as a container component\u2019s <code>render<\/code> method grows. It\u2019s likely you could take much of its contents and split it into a new presentational component. This makes it easier to reuse the presentational code in the future. It ends up self-contained and capable of operating independently of any specific data source.<\/p>\n<p>Stateful components are less likely to be reused. Non-trivial behaviours naturally accumulate within them, resulting in dependencies on the outside world. That\u2019s not to say they <em>can\u2019t<\/em> be reused though \u2013 a two-stage confirmation button will contain internal state (to determine whether to display \u201cReset User\u2019s Password\u201d or \u201cAre You Sure?\u201d) but will also be deployed throughout your codebase.<\/p>\n<p>Perhaps more than anything, intentionally distinguishing between Presentional and Container components keeps you aware of where your application\u2019s state lies. Minimising the number of components with state contributes towards a maintainable codebase and helps to separate concerns.<\/p>\n<p>If you can\u2019t decide whether a component should hold state, keep coding and refactor later \u2013 it\u2019s probably too early in your project\u2019s lifecycle to know where the complexity (and hence the state) will congregate.\n<\/p><\/div>\n<blockquote><p><strong><span style=\"color: #ff6600;\">If you liked the article, do not forget to share it with your friends. Follow us on\u00a0<span style=\"color: #ff0000;\"><a style=\"color: #ff0000;\" href=\"https:\/\/news.google.com\/publications\/CAAqBwgKMLG0nwswvr63Aw\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Google News<\/a><\/span>\u00a0too, click on the star and choose us from your favorites.<\/span><\/strong><\/p><\/blockquote>\n<blockquote>\n<p style=\"text-align: center;\">For forums sites go to <span style=\"color: #ff9900;\"><a style=\"color: #ff9900;\" href=\"https:\/\/forum.buradabiliyorum.com\/\" target=\"_blank\" rel=\"noopener\">Forum.BuradaBiliyorum.Com<\/a><\/span><\/strong><\/p>\n<\/blockquote>\n<blockquote>\n<p style=\"text-align: center;\"><strong>If you want to read more like this article, you can visit our <span style=\"color: #ff9900;\"><a style=\"color: #ff9900;\" href=\"https:\/\/en.buradabiliyorum.com\/technology\/\" target=\"_blank\" rel=\"noopener\">Technology category.<\/a><\/span><\/strong><\/p>\n<\/blockquote>\n<p><span style=\"color: black;\"><a style=\"color: #ff9900;\" href=\"https:\/\/www.cloudsavvyit.com\/9020\/what-are-presentational-and-container-components-in-react\/\" target=\"_blank\" rel=\"noopener\">Source<\/a><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>&#8220;#What Are Presentational and Container Components in React? \u2013 CloudSavvy IT&#8221; React has a component-based architecture that encourages you to split your codebase into reusable units of functionality. Not all components are created equal though. Let\u2019s look at the differences between two common types, Presentational and Container (also known as \u201cStateful\u201d) components. Is There Any&#8230;<\/p>\n","protected":false},"author":1,"featured_media":155335,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"https:\/\/www.cloudsavvyit.com\/p\/uploads\/2021\/01\/24b43beb.jpg","fifu_image_alt":"","footnotes":""},"categories":[18],"tags":[],"class_list":["post-155334","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-technology"],"_links":{"self":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts\/155334","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/comments?post=155334"}],"version-history":[{"count":0,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts\/155334\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/media\/155335"}],"wp:attachment":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/media?parent=155334"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/categories?post=155334"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/tags?post=155334"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}