Creating new items in sharepoint list with SPFx

%3CLINGO-SUB%20id%3D%22lingo-sub-416229%22%20slang%3D%22en-US%22%3ECreating%20new%20items%20in%20sharepoint%20list%20with%20SPFx%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-416229%22%20slang%3D%22en-US%22%3E%3CP%3EHi%3CBR%20%2F%3EI%20am%20building%20an%20web%20part%20in%20sharepoin%20online%20that%20render%20data%20from%20a%20list.%3CBR%20%2F%3EAll%20the%20rendering%20is%20working%20fine%2C%20now%20I%20want%20to%20go%20to%20the%20next%20level%20and%20allow%20the%20user%20create%20new%20items%20direct%20from%20the%20web%20part.%3CBR%20%2F%3EFor%20that%20I%20am%20using%20the%20Panel%20component%20that%20render%20a%20serie%20of%20text%20and%20dropdown%20components.%3CBR%20%2F%3EBeside%20that%20I%20have%20a%20method%20that%20create%20the%20new%20item%20in%20the%20list.%3CBR%20%2F%3Ewhat%20I%20need%20help%20with%20is%20find%20the%20way%20to%20pass%20the%20data%20that%20the%20user%20write%20to%20the%20method%20that%20create%20the%20item.%3C%2FP%3E%3CP%3EThis%20is%20how%20the%20panel%20looks%20like%3A%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CDIV%3E%3CPRE%3E%3CSPAN%3E%26lt%3B%3C%2FSPAN%3E%3CSPAN%3EPanel%3C%2FSPAN%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3CSPAN%3EisOpen%3C%2FSPAN%3E%3CSPAN%3E%3D%3C%2FSPAN%3E%3CSPAN%3E%7Bthis%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3Estate%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3EshowPanel%3C%2FSPAN%3E%3CSPAN%3E%7D%3C%2FSPAN%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3CSPAN%3Etype%3C%2FSPAN%3E%3CSPAN%3E%3D%3C%2FSPAN%3E%3CSPAN%3E%7B%3C%2FSPAN%3E%3CSPAN%3EPanelType%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3Emedium%3C%2FSPAN%3E%3CSPAN%3E%7D%3C%2FSPAN%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3CSPAN%3EonDismiss%3C%2FSPAN%3E%3CSPAN%3E%3D%3C%2FSPAN%3E%3CSPAN%3E%7Bthis%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3E_hidePanel%3C%2FSPAN%3E%3CSPAN%3E%7D%3C%2FSPAN%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3CSPAN%3EheaderText%3C%2FSPAN%3E%3CSPAN%3E%3D%3C%2FSPAN%3E%3CSPAN%3E%22Create%20new%20agreement%22%3C%2FSPAN%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3CSPAN%3EcloseButtonAriaLabel%3C%2FSPAN%3E%3CSPAN%3E%3D%3C%2FSPAN%3E%3CSPAN%3E%22Close%22%3C%2FSPAN%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3CSPAN%3EonRenderFooterContent%3C%2FSPAN%3E%3CSPAN%3E%3D%3C%2FSPAN%3E%3CSPAN%3E%7Bthis%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3E_onRenderFooterContent%3C%2FSPAN%3E%3CSPAN%3E%7D%3C%2FSPAN%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3CSPAN%3E%26gt%3B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3CSPAN%3E%26lt%3B%3C%2FSPAN%3E%3CSPAN%3Ediv%3C%2FSPAN%3E%3CSPAN%3E%26gt%3B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3CSPAN%3E%26lt%3B%3C%2FSPAN%3E%3CSPAN%3ELabel%3C%2FSPAN%3E%3CSPAN%3E%26gt%3B%3C%2FSPAN%3E%3CSPAN%3ECustomer%20Agreement%20Nr%3A%3C%2FSPAN%3E%3CSPAN%3E%3CSPAN%3ELabel%3C%2FSPAN%3E%3CSPAN%3E%26gt%3B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3CSPAN%3E%26lt%3B%3C%2FSPAN%3E%3CSPAN%3ETextField%3C%2FSPAN%3E%20%3CSPAN%3Eunderlined%3C%2FSPAN%3E%20%3CSPAN%3Eplaceholder%3C%2FSPAN%3E%3CSPAN%3E%3D%3C%2FSPAN%3E%3CSPAN%3E%22Enter%20a%20number%22%3C%2FSPAN%3E%20%3CSPAN%3E%2F%26gt%3B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3CSPAN%3E%26lt%3B%3C%2FSPAN%3E%3CSPAN%3EDropdown%3C%2FSPAN%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3CSPAN%3Eplaceholder%3C%2FSPAN%3E%3CSPAN%3E%3D%3C%2FSPAN%3E%3CSPAN%3E%22Select%20an%20option%22%3C%2FSPAN%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3CSPAN%3Elabel%3C%2FSPAN%3E%3CSPAN%3E%3D%3C%2FSPAN%3E%3CSPAN%3E%22Agreement%20type%22%3C%2FSPAN%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3CSPAN%3Eoptions%3C%2FSPAN%3E%3CSPAN%3E%3D%3C%2FSPAN%3E%3CSPAN%3E%7B%3C%2FSPAN%3E%3CSPAN%3E%5B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3CSPAN%3E%20%7B%20%3C%2FSPAN%3E%3CSPAN%3Ekey%3A%3C%2FSPAN%3E%20%3CSPAN%3E'CustomerAgreement'%3C%2FSPAN%3E%3CSPAN%3E%2C%20%3C%2FSPAN%3E%3CSPAN%3Etext%3A%3C%2FSPAN%3E%20%3CSPAN%3E'Customer%20Agreement'%3C%2FSPAN%3E%3CSPAN%3E%20%7D%2C%3C%2FSPAN%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3CSPAN%3E%20%7B%20%3C%2FSPAN%3E%3CSPAN%3Ekey%3A%3C%2FSPAN%3E%20%3CSPAN%3E'PartnerAgreement'%3C%2FSPAN%3E%3CSPAN%3E%2C%20%3C%2FSPAN%3E%3CSPAN%3Etext%3A%3C%2FSPAN%3E%20%3CSPAN%3E'Partner%20Agreement'%3C%2FSPAN%3E%3CSPAN%3E%20%7D%2C%3C%2FSPAN%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3CSPAN%3E%20%7B%20%3C%2FSPAN%3E%3CSPAN%3Ekey%3A%3C%2FSPAN%3E%20%3CSPAN%3E'SubcontractorAgreement'%3C%2FSPAN%3E%3CSPAN%3E%2C%20%3C%2FSPAN%3E%3CSPAN%3Etext%3A%3C%2FSPAN%3E%20%3CSPAN%3E'Subcontractor%20Agreement'%3C%2FSPAN%3E%3CSPAN%3E%20%7D%2C%3C%2FSPAN%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3CSPAN%3E%20%5D%3C%2FSPAN%3E%3CSPAN%3E%7D%3C%2FSPAN%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3CSPAN%3EonRenderCaretDown%3C%2FSPAN%3E%3CSPAN%3E%3D%3C%2FSPAN%3E%3CSPAN%3E%7Bthis%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3E_onRenderCaretDown%3C%2FSPAN%3E%3CSPAN%3E%7D%3C%2FSPAN%3E%20%3CSPAN%3E%2F%26gt%3B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3CSPAN%3E%3CSPAN%3Ediv%3C%2FSPAN%3E%3CSPAN%3E%26gt%3B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3CSPAN%3E%3CSPAN%3EPanel%3C%2FSPAN%3E%3CSPAN%3E%26gt%3B%3C%2FSPAN%3E%3C%2FSPAN%3E%3C%2FSPAN%3E%3C%2FSPAN%3E%3C%2FPRE%3E%3CDIV%3E%26nbsp%3B%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3EHere%20is%20the%20method%20that%20render%20the%20Save%20and%20cancel%20controllers%20of%20the%20panel%3A%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CPRE%3E%3CSPAN%3Eprivate%3C%2FSPAN%3E%20%3CSPAN%3E_onRenderFooterContent%3C%2FSPAN%3E%20%3CSPAN%3E%3D%3C%2FSPAN%3E%3CSPAN%3E%20()%20%3C%2FSPAN%3E%3CSPAN%3E%3D%26gt%3B%3C%2FSPAN%3E%3CSPAN%3E%20%7B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3CSPAN%3Ereturn%3C%2FSPAN%3E%3CSPAN%3E%20(%3C%2FSPAN%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3CSPAN%3E%26lt%3B%3C%2FSPAN%3E%3CSPAN%3Ediv%3C%2FSPAN%3E%3CSPAN%3E%26gt%3B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3CSPAN%3E%26lt%3B%3C%2FSPAN%3E%3CSPAN%3EPrimaryButton%3C%2FSPAN%3E%20%3CSPAN%3EonClick%3C%2FSPAN%3E%3CSPAN%3E%3D%3C%2FSPAN%3E%3CSPAN%3E%7Bthis%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3E_showPanel%3C%2FSPAN%3E%3CSPAN%3E%7D%3C%2FSPAN%3E%20%3CSPAN%3Estyle%3C%2FSPAN%3E%3CSPAN%3E%3D%3C%2FSPAN%3E%3CSPAN%3E%7B%3C%2FSPAN%3E%3CSPAN%3E%7B%20%3C%2FSPAN%3E%3CSPAN%3EmarginRight%3A%3C%2FSPAN%3E%20%3CSPAN%3E'8px'%3C%2FSPAN%3E%3CSPAN%3E%20%7D%3C%2FSPAN%3E%3CSPAN%3E%7D%3C%2FSPAN%3E%3CSPAN%3E%26gt%3B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3CSPAN%3E%20Save%3C%2FSPAN%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3CSPAN%3E%3CSPAN%3EPrimaryButton%3C%2FSPAN%3E%3CSPAN%3E%26gt%3B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3CSPAN%3E%26lt%3B%3C%2FSPAN%3E%3CSPAN%3EDefaultButton%3C%2FSPAN%3E%20%3CSPAN%3EonClick%3C%2FSPAN%3E%3CSPAN%3E%3D%3C%2FSPAN%3E%3CSPAN%3E%7Bthis%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3E_hidePanel%3C%2FSPAN%3E%3CSPAN%3E%7D%3C%2FSPAN%3E%3CSPAN%3E%26gt%3B%3C%2FSPAN%3E%3CSPAN%3ECancel%3C%2FSPAN%3E%3CSPAN%3E%3CSPAN%3EDefaultButton%3C%2FSPAN%3E%3CSPAN%3E%26gt%3B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3CSPAN%3E%3CSPAN%3Ediv%3C%2FSPAN%3E%3CSPAN%3E%26gt%3B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3CSPAN%3E%20)%3B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3CSPAN%3E%20%7D%3B%3C%2FSPAN%3E%3C%2FSPAN%3E%3C%2FSPAN%3E%3C%2FSPAN%3E%3C%2FPRE%3E%3CDIV%3E%26nbsp%3B%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3Eand%20this%20is%20the%20one%20that%20create%20the%20item%20in%20the%20list%3A%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%26nbsp%3B%3C%2FDIV%3E%3CDIV%3E%3CPRE%3E%3CSPAN%3Eprivate%3C%2FSPAN%3E%20%3CSPAN%3E_createItem%3C%2FSPAN%3E%3CSPAN%3E()%3C%2FSPAN%3E%3CSPAN%3E%3A%3C%2FSPAN%3E%20%3CSPAN%3Evoid%3C%2FSPAN%3E%3CSPAN%3E%20%7B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3CSPAN%3Esp%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3Eweb%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3Elists%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3EgetByTitle%3C%2FSPAN%3E%3CSPAN%3E(%3C%2FSPAN%3E%3CSPAN%3E'Agreement%20Database'%3C%2FSPAN%3E%3CSPAN%3E).%3C%2FSPAN%3E%3CSPAN%3Eitems%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3Eadd%3C%2FSPAN%3E%3CSPAN%3E(%7B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3CSPAN%3E'Title'%3C%2FSPAN%3E%3CSPAN%3E%3A%3C%2FSPAN%3E%20%3CSPAN%3E%60From%20form%60%3C%2FSPAN%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3CSPAN%3E%20%7D).%3C%2FSPAN%3E%3CSPAN%3Ethen%3C%2FSPAN%3E%3CSPAN%3E((%3C%2FSPAN%3E%3CSPAN%3Eresult%3C%2FSPAN%3E%3CSPAN%3E%3A%3C%2FSPAN%3E%20%3CSPAN%3EItemAddResult%3C%2FSPAN%3E%3CSPAN%3E)%3C%2FSPAN%3E%3CSPAN%3E%3A%3C%2FSPAN%3E%20%3CSPAN%3Evoid%3C%2FSPAN%3E%20%3CSPAN%3E%3D%26gt%3B%3C%2FSPAN%3E%3CSPAN%3E%20%7B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3CSPAN%3Econst%3C%2FSPAN%3E%20%3CSPAN%3Eitem%3C%2FSPAN%3E%3CSPAN%3E%3A%3C%2FSPAN%3E%20%3CSPAN%3EIList%3C%2FSPAN%3E%20%3CSPAN%3E%3D%3C%2FSPAN%3E%20%3CSPAN%3Eresult%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3Edata%3C%2FSPAN%3E%20%3CSPAN%3Eas%3C%2FSPAN%3E%20%3CSPAN%3EIList%3C%2FSPAN%3E%3CSPAN%3E%3B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3CSPAN%3Econsole%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3Elog%3C%2FSPAN%3E%3CSPAN%3E(%3C%2FSPAN%3E%3CSPAN%3E%60Item%20created%3A%20'%3C%2FSPAN%3E%3CSPAN%3E%24%7B%3C%2FSPAN%3E%3CSPAN%3Eitem%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3ETitle%3C%2FSPAN%3E%3CSPAN%3E%7D%3C%2FSPAN%3E%3CSPAN%3E'%60%3C%2FSPAN%3E%3CSPAN%3E%20)%3B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3CSPAN%3E%20%7D%2C%20(%3C%2FSPAN%3E%3CSPAN%3Eerror%3C%2FSPAN%3E%3CSPAN%3E%3A%3C%2FSPAN%3E%20%3CSPAN%3Eany%3C%2FSPAN%3E%3CSPAN%3E)%3C%2FSPAN%3E%3CSPAN%3E%3A%3C%2FSPAN%3E%20%3CSPAN%3Evoid%3C%2FSPAN%3E%20%3CSPAN%3E%3D%26gt%3B%3C%2FSPAN%3E%3CSPAN%3E%20%7B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3CSPAN%3Econsole%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3Elog%3C%2FSPAN%3E%3CSPAN%3E(%3C%2FSPAN%3E%3CSPAN%3E'Error%3A%20'%3C%2FSPAN%3E%20%3CSPAN%3E%2B%3C%2FSPAN%3E%20%3CSPAN%3Eerror%3C%2FSPAN%3E%3CSPAN%3E)%3B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3CSPAN%3E%20%7D)%3B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3CSPAN%3E%20%7D%3C%2FSPAN%3E%3C%2FPRE%3E%3CDIV%3E%26nbsp%3B%3C%2FDIV%3E%3CDIV%3E%3CP%3ESo%20my%20question%20is%20how%20can%20I%20pass%20the%20text%20written%20by%20the%20user%20in%20the%20textfield%20component%20or%20the%20value%20choosed%20in%20the%20dropdown%20component%20to%20the%20_createItem()%20method%3F%3C%2FP%3E%3CP%3EBest%20regards%3CBR%20%2F%3EAmerico%3C%2FP%3E%3C%2FDIV%3E%3C%2FDIV%3E%3C%2FDIV%3E%3C%2FDIV%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-416229%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EDeveloper%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-420290%22%20slang%3D%22en-US%22%3ERe%3A%20Creating%20new%20items%20in%20sharepoint%20list%20with%20SPFx%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-420290%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F117034%22%20target%3D%22_blank%22%3E%40Americo%20Perez%3C%2FA%3E%20You%20would%20need%20to%20maintain%20the%20values%20of%20the%20options%20inside%20the%20state%20of%20your%20react%20component.%20Create%20an%20object%20on%20your%20state%20to%20store%20the%20values%20of%20the%20store%2C%20and%20update%20those%20values%20using%20events%20when%20a%20user%20makes%20changes%20to%20the%20form.%3CBR%20%2F%3E%3CBR%20%2F%3EHere%20is%20a%20post%20around%20this%3CBR%20%2F%3E%3CA%20href%3D%22https%3A%2F%2Fwww.codementor.io%2Fblizzerand%2Fbuilding-forms-using-react-everything-you-need-to-know-iz3eyoq4y%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fwww.codementor.io%2Fblizzerand%2Fbuilding-forms-using-react-everything-you-need-to-know-iz3eyoq4y%3C%2FA%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-434293%22%20slang%3D%22en-US%22%3ERe%3A%20Creating%20new%20items%20in%20sharepoint%20list%20with%20SPFx%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-434293%22%20slang%3D%22en-US%22%3EThanks%2C%20I%20am%20gonna%20give%20it%20a%20try%20today%20and%20I%20come%20back%20with%20feedbacks%3CBR%20%2F%3E%3CBR%20%2F%3ERegards%3CBR%20%2F%3EAmerico%3C%2FLINGO-BODY%3E
Highlighted
Regular Contributor

Hi
I am building an web part in sharepoin online that render data from a list.
All the rendering is working fine, now I want to go to the next level and allow the user create new items direct from the web part.
For that I am using the Panel component that render a serie of text and dropdown components.
Beside that I have a method that create the new item in the list.
what I need help with is find the way to pass the data that the user write to the method that create the item.

This is how the panel looks like:

 

<Panel

isOpen={this.state.showPanel}

type={PanelType.medium}

onDismiss={this._hidePanel}

headerText="Create new agreement"

closeButtonAriaLabel="Close"

onRenderFooterContent={this._onRenderFooterContent}

>

<div>

<Label>Customer Agreement Nr:</Label>

<TextField underlined placeholder="Enter a number" />




<Dropdown

placeholder="Select an option"

label="Agreement type"

options={[

{ key: 'CustomerAgreement', text: 'Customer Agreement' },

{ key: 'PartnerAgreement', text: 'Partner Agreement' },

{ key: 'SubcontractorAgreement', text: 'Subcontractor Agreement' },

]}

onRenderCaretDown={this._onRenderCaretDown} />

</div>

</Panel>
 
Here is the method that render the Save and cancel controllers of the panel:
private _onRenderFooterContent = () => {

return (

<div>

<PrimaryButton onClick={this._showPanel} style={{ marginRight: '8px' }}>

Save

</PrimaryButton>

<DefaultButton onClick={this._hidePanel}>Cancel</DefaultButton>

</div>

);

};
 
and this is the one that create the item in the list:
 
private _createItem(): void {

sp.web.lists.getByTitle('Agreement Database').items.add({

'Title': `From form`

}).then((result: ItemAddResult): void => {

const item: IList = result.data as IList;

console.log(`Item created: '${item.Title}'` );

}, (error: any): void => {

console.log('Error: ' + error);

});

}
 

So my question is how can I pass the text written by the user in the textfield component or the value choosed in the dropdown component to the _createItem() method?

Best regards
Americo

2 Replies
Highlighted

@Americo Perez You would need to maintain the values of the options inside the state of your react component. Create an object on your state to store the values of the store, and update those values using events when a user makes changes to the form.

Here is a post around this
https://www.codementor.io/blizzerand/building-forms-using-react-everything-you-need-to-know-iz3eyoq4...

Highlighted
Thanks, I am gonna give it a try today and I come back with feedbacks

Regards
Americo