1"use strict";(self.webpackChunkhandsonreact=self.webpackChunkhandsonreact||[]).push([[7693],{3905:(e,t,r)=>{r.d(t,{Zo:()=>l,kt:()=>j});var n=r(7294);function a(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function o(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function p(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?o(Object(r),!0).forEach((function(t){a(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):o(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function c(e,t){if(null==e)return{};var r,n,a=function(e,t){if(null==e)return{};var r,n,a={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var i=n.createContext({}),s=function(e){var t=n.useContext(i),r=t;return e&&(r="function"==typeof e?e(t):p(p({},t),e)),r},l=function(e){var t=s(e.components);return n.createElement(i.Provider,{value:t},e.children)},u="mdxType",m={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},d=n.forwardRef((function(e,t){var r=e.components,a=e.mdxType,o=e.originalType,i=e.parentName,l=c(e,["components","mdxType","originalType","parentName"]),u=s(r),d=a,j=u["".concat(i,".").concat(d)]||u[d]||m[d]||o;return r?n.createElement(j,p(p({ref:t},l),{},{components:r})):n.createElement(j,p({ref:t},l))}));function j(e,t){var r=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=r.length,p=new Array(o);p[0]=d;var c={};for(var i in t)hasOwnProperty.call(t,i)&&(c[i]=t[i]);c.originalType=e,c[u]="string"==typeof e?e:a,p[1]=c;for(var s=2;s<o;s++)p[s]=r[s];return n.createElement.apply(null,p)}return n.createElement.apply(null,r)}d.displayName="MDXCreateElement"},9604:(e,t,r)=>{r.r(t),r.d(t,{assets:()=>i,contentTitle:()=>p,default:()=>u,frontMatter:()=>o,metadata:()=>c,toc:()=>s});var n=r(7462),a=(r(7294),r(3905));const o={title:"Lab 19: HTTP PUT"},p=void 0,c={unversionedId:"labs/js/HTTP-PUT",id:"labs/js/HTTP-PUT",title:"Lab 19: HTTP PUT",description:"Objectives",source:"@site/docs/labs/js/19-HTTP-PUT.md",sourceDirName:"labs/js",slug:"/labs/js/HTTP-PUT",permalink:"/docs/labs/js/HTTP-PUT",draft:!1,tags:[],version:"current",sidebarPosition:19,frontMatter:{title:"Lab 19: HTTP PUT"},sidebar:"someSidebar",previous:{title:"Lab 18: HTTP GET",permalink:"/docs/labs/js/HTTP-GET"},next:{title:"Lab 15: Form Values to State",permalink:"/docs/labs/ts/FormValuesToState"}},i={},s=[{value:"Objectives",id:"objectives",level:2},{value:"Steps",id:"steps",level:2},{value:"Communicate with a REST API to update data",id:"communicate-with-a-rest-api-to-update-data",level:3},{value:"\u2714 You have completed Lab 19",id:"-you-have-completed-lab-19",level:3}],l={toc:s};
1function u(e){let{components:t,...r}=e;return(0,a.kt)("wrapper",(0,n.Z)({},l,r,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("h2",{id:"objectives"},"Objectives"),(0,a.kt)("ul",{className:"contains-task-list"},(0,a.kt)("li",{parentName:"ul",className:"task-list-item"},(0,a.kt)("input",{parentName:"li",type:"checkbox",checked:!1,disabled:!0})," ","Communicate with a REST API to update data")),(0,a.kt)("h2",{id:"steps"},"Steps"),(0,a.kt)("h3",{id:"communicate-with-a-rest-api-to-update-data"},"Communicate with a REST API to update data"),(0,a.kt)("ol",null,(0,a.kt)("li",{parentName:"ol"},(0,a.kt)("p",{parentName:"li"},(0,a.kt)("strong",{parentName:"p"},"Implement")," a ",(0,a.kt)("strong",{parentName:"p"},"method")," in the API object to do a ",(0,a.kt)("strong",{parentName:"p"},"PUT")," (update)."),(0,a.kt)("h4",{parentName:"li",id:"srcprojectsprojectapijs"},(0,a.kt)("inlineCode",{parentName:"h4"},"src\\projects\\projectAPI.js")),(0,a.kt)("pre",{parentName:"li"},(0,a.kt)("code",{parentName:"pre",className:"language-diff"},"...\n\nconst projectAPI = {\n...\n\n+ put(project) {\n+ return fetch(`${url}/${project.id}`, {\n+ method: 'PUT',\n+ body: JSON.stringify(project),\n+ headers: {\n+ 'Content-Type': 'application/json'\n+ }\n+ })\n+ .then(checkStatus)\n+ .then(parseJSON)\n+ .catch((error) => {\n+ console.log('log client error ' + error);\n+ throw new Error(\n+ 'There was an error updating the project. Please try again.'\n+ );\n+ });\n+ },\n\n};\n"))),(0,a.kt)("li",{parentName:"ol"},(0,a.kt)("p",{parentName:"li"},(0,a.kt)("strong",{parentName:"p"},"Invoke")," the ",(0,a.kt)("strong",{parentName:"p"},"method")," in your container (",(0,a.kt)("inlineCode",{parentName:"p"},"ProjectsPage"),") component."),(0,a.kt)("h4",{parentName:"li",id:"srcprojectsprojectspagejsx"},(0,a.kt)("inlineCode",{parentName:"h4"},"src\\projects\\ProjectsPage.jsx")),(0,a.kt)("pre",{parentName:"li"},(0,a.kt)("code",{parentName:"pre",className:"language-diff"},"+ import { Project } from './Project';\n...\nfunction ProjectsPage() {\n ...\n\n const saveProject = (project) => {\n- let updatedProjects = projects.map((p) => {\n- return p.id === project.id ? project : p;\n- });\n- setProjects(updatedProjects);\n\n+ projectAPI\n+ .put(project)\n+ .then((updatedProject) => {\n+ let updatedProjects = projects.map((p) => {\n+ return p.id === project.id ? new Project(updatedProject) : p;\n+ });\n+ setProjects(updatedProjects);\n+ })\n+ .catch((e) => {\n+ setError(e.message);\n+ });\n };\n\n return (\n ...\n );\n}\n\nexport default ProjectsPage;\n"))),(0,a.kt)("li",{parentName:"ol"},(0,a.kt)("p",{parentName:"li"},"Verify the application is working by following these steps."),(0,a.kt)("ol",{parentName:"li"},(0,a.kt)("li",{parentName:"ol"},"Click the edit button for a project."),(0,a.kt)("li",{parentName:"ol"},"Change the project name in the form."),(0,a.kt)("li",{parentName:"ol"},"Click the save button on the form."),(0,a.kt)("li",{parentName:"ol"},"Verify the card shows the updated data."),(0,a.kt)("li",{parentName:"ol"},"Refresh your browser."),(0,a.kt)("li",{parentName:"ol"},"Verify the project is still updated.")))),(0,a.kt)("p",null,(0,a.kt)("img",{parentName:"p",src:"https://user-images.githubusercontent.com/1474579/65075658-573c3a80-d965-11e9-943c-32fa4f6b8849.png",alt:"image"})),(0,a.kt)("hr",null),(0,a.kt)("h3",{id:"-you-have-completed-lab-19"},"\u2714"," You have completed Lab 19"),(0,a.kt)("hr",null))}u.isMDXComponent=!0}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.