{"id":546,"date":"2024-09-03T10:32:42","date_gmt":"2024-09-03T15:32:42","guid":{"rendered":"https:\/\/camilopinzoncv.julianvalencia.co\/?p=546"},"modified":"2025-01-08T11:42:28","modified_gmt":"2025-01-08T16:42:28","slug":"component-lifecycle-methods-or-hooks","status":"publish","type":"post","link":"https:\/\/camilopinzoncv.julianvalencia.co\/en\/component-lifecycle-methods-or-hooks\/","title":{"rendered":"Component Lifecycle Methods (or Hooks)"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"546\" class=\"elementor elementor-546\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f521b69 e-flex e-con-boxed e-con e-parent\" data-id=\"f521b69\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d2e3d53 elementor-widget elementor-widget-spacer\" data-id=\"d2e3d53\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-18b3047 elementor-widget elementor-widget-heading\" data-id=\"18b3047\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">Component Lifecycle Methods (or Hooks)<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b8747ce elementor-widget elementor-widget-spacer\" data-id=\"b8747ce\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-a4abc08 e-flex e-con-boxed e-con e-parent\" data-id=\"a4abc08\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-53190d6 elementor-widget elementor-widget-text-editor\" data-id=\"53190d6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<ul><li><strong>Excercice: <\/strong>Create a component that fetches data from an API and displays it use <code>useEffect<\/code>to handle and clean up if necessary.<\/li><li><strong>Practice:<\/strong> Understand how to use <code>useEffect<\/code>for different scenarios, like fetching data, setting up subscriptions and cleaning up resourses<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-fd55cb8 e-flex e-con-boxed e-con e-parent\" data-id=\"fd55cb8\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-97fa959 elementor-widget elementor-widget-heading\" data-id=\"97fa959\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Step 1: Set Up the Component<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-aaa7b38 elementor-widget elementor-widget-text-editor\" data-id=\"aaa7b38\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Start by creating a basic functional component in <a href=\"https:\/\/react.dev\/\" target=\"_blank\" rel=\"noreferer noopener\">React.<\/a><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3683982 elementor-widget elementor-widget-code-block-for-elementor\" data-id=\"3683982\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-block-for-elementor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<pre class='line-numbers theme-okaidia' data-show-toolbar='yes'><code class='language-javascript'>const DataFetchingComponent = () =&gt; {\n    return(\n        &lt;div&gt;\n            &lt;h1&gt;Data Fetching Component&lt;\/h1&gt;\n        &lt;\/div&gt;\n    );\n};\n\nexport default DataFetchingComponent;<\/code><\/pre>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-861f5c8 e-flex e-con-boxed e-con e-parent\" data-id=\"861f5c8\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7c23a6a elementor-widget elementor-widget-heading\" data-id=\"7c23a6a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Step 2: Add state for storing data<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7eca766 elementor-widget elementor-widget-text-editor\" data-id=\"7eca766\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>You need a state variable to store the data fetched from the API. Use the <code>useState<\/code> hook for this.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-323d366 elementor-widget elementor-widget-code-block-for-elementor\" data-id=\"323d366\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-block-for-elementor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<pre class='line-numbers theme-okaidia' data-show-toolbar='yes'><code class='language-javascript'>import {useState} from &#039;react&#039;;\n\nconst DataFetchingComponent = () =&gt; {\n    const [data, setData] = useState(null); \/\/Initialize state for storing data\n    \n    return(\n        &lt;div&gt;\n            &lt;h1&gt;Data Fetching Component&lt;\/h1&gt;\n        &lt;\/div&gt;\n    );\n};\n\nexport default DataFetchingComponent;<\/code><\/pre>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7c5dc64 elementor-widget elementor-widget-text-editor\" data-id=\"7c5dc64\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<ul>\n \t<li><strong>Explanation<\/strong>\n<ul>\n \t<li><code>useState(null)<\/code>initializes <code>data<\/code> with value of <code>null<\/code>.<\/li>\n \t<li><code>setData<\/code> is the function you will use to update the <code>data<\/code> state<\/li>\n<\/ul>\n<\/li>\n<\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-4efea73 e-flex e-con-boxed e-con e-parent\" data-id=\"4efea73\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-88e0757 elementor-widget elementor-widget-heading\" data-id=\"88e0757\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Step 3: Fetch data with useEffect<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6b315f2 elementor-widget elementor-widget-text-editor\" data-id=\"6b315f2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Next use the <code>useEffect<\/code> hook to fetch data when component mounts.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7a591eb elementor-widget elementor-widget-code-block-for-elementor\" data-id=\"7a591eb\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-block-for-elementor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<pre class='line-numbers theme-okaidia' data-show-toolbar='yes'><code class='language-javascript'>import {useState, useEffect} from &#039;react&#039;;\n\nconst DataFetchingComponent = () =&gt; {\n    const [data, setData] = useState(null);\n    \n    useEffect(() =&gt; {\n        const fetchData = async() =&gt;{\n            try{\n                const response = await fetch(&#039;https:\/\/jsonplaceholder.typicode.com\/posts&#039;);\n                const result = await response.json();\n                setData(result);\n            } catch(error) {\n                console.error(`Error fetching data: ${error}`);\n            }\n        };\n        \n        fetchData();\n    },[]); \/\/ Empty dependency array to run only once on mount\n    \n    return(\n        &lt;div&gt;\n            &lt;h1&gt;Data Fetching Component&lt;\/h1&gt;\n        &lt;\/div&gt;\n    )\n};\n\nexport default DataFetchingComponent;<\/code><\/pre>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7299c73 elementor-widget elementor-widget-text-editor\" data-id=\"7299c73\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<ul><li><strong>Explanation<\/strong><ul><li><code>useEffect(() =&gt; {}, [])<\/code> runs the code once, when the component mounts. The empty array <code>[]<\/code> ensures this.<\/li><li><code>fetchData<\/code> is an asynchromous function that fetches data from the given API.<\/li><li><code>setData(result)<\/code> updates the <code>data<\/code> state with the fetched result.<\/li><\/ul><\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-4f206f6 e-flex e-con-boxed e-con e-parent\" data-id=\"4f206f6\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2f3a72d elementor-widget elementor-widget-heading\" data-id=\"2f3a72d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Step 4: Render the fetched data<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c4551d4 elementor-widget elementor-widget-text-editor\" data-id=\"c4551d4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Now that the data is fetched and stored in state, render it in your component.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b5e24c8 elementor-widget elementor-widget-code-block-for-elementor\" data-id=\"b5e24c8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-block-for-elementor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<pre class='line-numbers theme-okaidia' data-show-toolbar='yes'><code class='language-javascript'>import {useState, useEffect} from &#039;react&#039;;\r\n\r\nconst DataFetchingComponent = () =&gt; {\r\n    const [data, setData], useState(null);\r\n    \r\n    useEffect(() =&gt; {\r\n        const fetchData = async() =&gt; {\r\n            try{\r\n                const response = await fetch(&#039;https:\/\/jsonplaceholder.typicode.com\/posts&#039;);\r\n                const result = await response.json();\r\n                setData(result);\r\n            }catch(error){\r\n                console.error(`Error fetching data: ${error}`);\r\n            }\r\n        }\r\n        \r\n        fetchData();\r\n    }, []);\r\n    \r\n    return(\r\n    &lt;div&gt;\r\n        &lt;h1&gt;Fetching data example&lt;\/h1&gt;\r\n        {data ? (\r\n            &lt;ul&gt;\r\n            {data.map((item, idx) =&gt; (\r\n                &lt;li key={idx}&gt;{item.title}&lt;\/li&gt;\r\n            ))}    \r\n            &lt;\/ul&gt;\r\n            ) : (\r\n                &lt;p&gt;Loading...&lt;\/p&gt;\r\n            )\r\n        }\r\n    &lt;\/div&gt;\r\n    );\r\n};\r\n\r\nexport default DataFetchingComponent;<\/code><\/pre>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6e4b878 elementor-widget elementor-widget-text-editor\" data-id=\"6e4b878\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<ul>\n \t<li><strong>Explanation<\/strong>\n<ul>\n \t<li><code>data ? (...):(...)<\/code>: This is a conditional (ternary) operator. If <code>data<\/code> is not <code>null<\/code>, it renders a list of data; otherwise, it shows a &#8220;Loading&#8230;&#8221; message.<\/li>\n \t<li><code>data.map((item, idx) =&gt; ...)<\/code>: Iterates over the fetched data array and renders each item as a list element.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-5391400 e-flex e-con-boxed e-con e-parent\" data-id=\"5391400\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9bf32eb elementor-widget elementor-widget-heading\" data-id=\"9bf32eb\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Handle Cleanup (if necessary)<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-df0e3f7 elementor-widget elementor-widget-text-editor\" data-id=\"df0e3f7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>In some cases, you might to clean up after side affects. For example, if you set up subscriptions or timers. In this case, no clean up in required because there&#8217;s no ongoing subscription or timer.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4b35ac1 elementor-widget elementor-widget-code-block-for-elementor\" data-id=\"4b35ac1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-block-for-elementor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<pre class='line-numbers theme-okaidia' data-show-toolbar='yes'><code class='language-javascript'>import {useState, useEffect} from &#039;react&#039;;\r\n\r\nconst DataFetchingComponent = () =&gt; {\r\n    const [data, setData], useState(null);\r\n    \r\n    useEffect(() =&gt; {\r\n        const fetchData = async() =&gt; {\r\n            try{\r\n                const response = await fetch(&#039;https:\/\/jsonplaceholder.typicode.com\/posts&#039;);\r\n                const result = await response.json();\r\n                setData(result);\r\n            }catch(error){\r\n                console.error(`Error fetching data: ${error}`);\r\n            }\r\n        }\r\n        \r\n        fetchData();\r\n        \r\n        \/\/Cleanup function (not necessary here)\r\n        return () =&gt;{\r\n            \/\/cleanup logic (e.g., unsubscribe, clear timers, etc.)\r\n        }\r\n    }, []);\r\n    \r\n    return(\r\n    &lt;div&gt;\r\n        &lt;h1&gt;Fetching data example&lt;\/h1&gt;\r\n        {data ? (\r\n            &lt;ul&gt;\r\n            {data.map((item, idx) =&gt; (\r\n                &lt;li key={idx}&gt;{item.title}&lt;\/li&gt;\r\n            ))}    \r\n            &lt;\/ul&gt;\r\n            ) : (\r\n                &lt;p&gt;Loading...&lt;\/p&gt;\r\n            )\r\n        }\r\n    &lt;\/div&gt;\r\n    );\r\n};\r\n\r\nexport default DataFetchingComponent;<\/code><\/pre>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-2a23fff e-flex e-con-boxed e-con e-parent\" data-id=\"2a23fff\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0484fa3 elementor-widget elementor-widget-heading\" data-id=\"0484fa3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Key Takeaways<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-57d436f elementor-widget elementor-widget-text-editor\" data-id=\"57d436f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<ul><li><strong><code>useEffect<\/code>:<\/strong> This hook is essential for side effects in functional components, such as data fetching. It can run on mount, on updates, or on unmount depending on the dependency array.<\/li><li><strong><code>useState<\/code>:<\/strong> Manages the local state of the component, allowing it to be reactive to changes (e.g., updating the UI when new data is fetched).<\/li><li><strong>Conditional Rendering:<\/strong> Handle different states (loading, error, success) gracefully with conditional logic.<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-73c2e69 e-flex e-con-boxed e-con e-parent\" data-id=\"73c2e69\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ecd90b1 elementor-widget elementor-widget-text-editor\" data-id=\"ecd90b1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><strong>You can find this example using TypeScrip on my <a href=\"https:\/\/github.com\/CamiloPinzon\/Component-lifecicle-methods\/tree\/main\" target=\"_blank\" rel=\"noopener\">github<\/a><\/strong><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-643b075 e-flex e-con-boxed e-con e-parent\" data-id=\"643b075\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>This example covers the basics of fetching data in a React component, which is a common pattern in real-world applications.<\/p>\n","protected":false},"author":1,"featured_media":581,"comment_status":"open","ping_status":"open","sticky":false,"template":"elementor_header_footer","format":"standard","meta":{"footnotes":""},"categories":[30,14,16,31,17],"tags":[],"class_list":["post-546","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-development","category-javascript","category-react","category-reactjs","category-web"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/camilopinzoncv.julianvalencia.co\/en\/wp-json\/wp\/v2\/posts\/546","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/camilopinzoncv.julianvalencia.co\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/camilopinzoncv.julianvalencia.co\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/camilopinzoncv.julianvalencia.co\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/camilopinzoncv.julianvalencia.co\/en\/wp-json\/wp\/v2\/comments?post=546"}],"version-history":[{"count":53,"href":"https:\/\/camilopinzoncv.julianvalencia.co\/en\/wp-json\/wp\/v2\/posts\/546\/revisions"}],"predecessor-version":[{"id":625,"href":"https:\/\/camilopinzoncv.julianvalencia.co\/en\/wp-json\/wp\/v2\/posts\/546\/revisions\/625"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/camilopinzoncv.julianvalencia.co\/en\/wp-json\/wp\/v2\/media\/581"}],"wp:attachment":[{"href":"https:\/\/camilopinzoncv.julianvalencia.co\/en\/wp-json\/wp\/v2\/media?parent=546"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/camilopinzoncv.julianvalencia.co\/en\/wp-json\/wp\/v2\/categories?post=546"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/camilopinzoncv.julianvalencia.co\/en\/wp-json\/wp\/v2\/tags?post=546"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}