SPFx: I can't reload a web part after save!

%3CLINGO-SUB%20id%3D%22lingo-sub-518191%22%20slang%3D%22en-US%22%3ESPFx%3A%20I%20can't%20reload%20a%20web%20part%20after%20save!%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-518191%22%20slang%3D%22en-US%22%3E%3CP%3EHi%2C%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20have%20a%20webpart%20which%20is%20very%20simple%2C%20it%20reads%20data%20from%20a%20list%20and%20allow%20the%20user%20select%20a%20Yes%2Fno%20value%20and%20save%20the%20selection%20back%20to%20the%20list%20in%20a%20Yes%2Fno%20column.%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThe%20webpart%20is%20working%20almost%20perfect.%26nbsp%3B%3C%2FP%3E%3CP%3EThe%20problem%20is%20when%20the%20user%20has%20made%20his%20choice%20and%20save%20the%20selections%2C%20the%20webpart%20doesn't%20reload%2C%20instead%20I%20need%20to%20reload%20the%20page%20to%20see%20the%20newly%20added%20data%20rendered%20in%20the%20webpart.%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ETo%20show%20the%20options%20that%20the%20user%20can%20select%20I%20am%20using%20a%20Panel%20control%20from%20Ms%20fabric%20UI.%26nbsp%3B%3C%2FP%3E%3CP%3EI%20tried%20with%20shouldComponentUpdate()%26nbsp%3B%20but%20for%20some%20reason%20it%20block%20the%20panel%20and%20is%20impossible%20to%20open%20it.%26nbsp%3B%3C%2FP%3E%3CP%3EI%20also%20tried%20with%20componentDidUpdate()%20but%20nothing%20happens%2C%20I%20still%20be%20forced%20to%20reload%20the%20page%20to%20see%20the%20new%20values.%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThen%20searching%20more%20in%20internet%20I%20found%20this%20answer%20in%20the%20community%3A%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2FSharePoint-Developer%2FHow-to-refresh-SPFX-webpart%2Ftd-p%2F59571%22%20target%3D%22_blank%22%20rel%3D%22noopener%22%3EHow%20to%20refresh%20SPFX%20webpart%3C%2FA%3E%3C%2FP%3E%3CP%3Eand%20I%20followed%20the%20last%20instructions%20but%20still%20nothing%20happens.%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThis%20is%20my%20code%3A%26nbsp%3B%3C%2FP%3E%3CP%3EThe%20render%20method%20(I%20post%20the%20entire%20method%20in%20case%20there%20is%20something%20wrong%20in%20it)%3A%26nbsp%3B%3C%2FP%3E%3CDIV%3E%3CPRE%3E%3CSPAN%3Epublic%3C%2FSPAN%3E%20%3CSPAN%3Erender%3C%2FSPAN%3E%3CSPAN%3E()%3C%2FSPAN%3E%3CSPAN%3E%3A%3C%2FSPAN%3E%20%3CSPAN%3EReact%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3EReactElement%3C%2FSPAN%3E%3CSPAN%3E%26lt%3B%3C%2FSPAN%3E%3CSPAN%3EIYesnoProps%3C%2FSPAN%3E%3CSPAN%3E%26gt%3B%20%7B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20%20%20%20%20%20%20return%3C%2FSPAN%3E%3CSPAN%3E%20(%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%26lt%3B%3C%2FSPAN%3E%3CSPAN%3Ediv%3C%2FSPAN%3E%20%3CSPAN%3EclassName%3C%2FSPAN%3E%3CSPAN%3E%3D%3C%2FSPAN%3E%3CSPAN%3E%7B%3C%2FSPAN%3E%20%3CSPAN%3Estyles%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3Eyesno%3C%2FSPAN%3E%20%3CSPAN%3E%7D%3C%2FSPAN%3E%3CSPAN%3E%26gt%3B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%26lt%3B%3C%2FSPAN%3E%3CSPAN%3Ediv%3C%2FSPAN%3E%20%3CSPAN%3EclassName%3C%2FSPAN%3E%3CSPAN%3E%3D%3C%2FSPAN%3E%3CSPAN%3E%7B%3C%2FSPAN%3E%20%3CSPAN%3Estyles%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3Econtainer%3C%2FSPAN%3E%20%3CSPAN%3E%7D%3C%2FSPAN%3E%3CSPAN%3E%26gt%3B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%26lt%3B%3C%2FSPAN%3E%3CSPAN%3Ediv%3C%2FSPAN%3E%20%3CSPAN%3EclassName%3C%2FSPAN%3E%3CSPAN%3E%3D%3C%2FSPAN%3E%3CSPAN%3E%7B%3C%2FSPAN%3E%20%3CSPAN%3Estyles%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3Erow%3C%2FSPAN%3E%20%3CSPAN%3E%7D%3C%2FSPAN%3E%3CSPAN%3E%26gt%3B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%26lt%3B%3C%2FSPAN%3E%3CSPAN%3Ediv%3C%2FSPAN%3E%20%3CSPAN%3EclassName%3C%2FSPAN%3E%3CSPAN%3E%3D%3C%2FSPAN%3E%3CSPAN%3E%7B%3C%2FSPAN%3E%20%3CSPAN%3Estyles%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3Ecolumn%3C%2FSPAN%3E%20%3CSPAN%3E%7D%3C%2FSPAN%3E%3CSPAN%3E%26gt%3B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%26lt%3B%3C%2FSPAN%3E%3CSPAN%3Ediv%3C%2FSPAN%3E%3CSPAN%3E%26gt%3B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%26lt%3B%3C%2FSPAN%3E%3CSPAN%3EDefaultButton%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20data-automation-is%3C%2FSPAN%3E%3CSPAN%3E%3D%3C%2FSPAN%3E%3CSPAN%3E%22test%22%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20text%3C%2FSPAN%3E%3CSPAN%3E%3D%3C%2FSPAN%3E%3CSPAN%3E%22Create%20new%20manager%22%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20onClick%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%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%26gt%3B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%26lt%3B%3C%2FSPAN%3E%3CSPAN%3EPanel%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20isOpen%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%3EisOpen%3C%2FSPAN%3E%3CSPAN%3E%7D%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20type%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%3CSPAN%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20onDismiss%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%3CSPAN%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20headerText%3C%2FSPAN%3E%3CSPAN%3E%3D%3C%2FSPAN%3E%3CSPAN%3E%22Create%20new%20manager%22%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20closeButtonAriaLabel%3C%2FSPAN%3E%3CSPAN%3E%3D%3C%2FSPAN%3E%3CSPAN%3E%22Close%22%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20onRenderFooterContent%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%3CSPAN%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%26gt%3B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%26lt%3B%3C%2FSPAN%3E%3CSPAN%3ETextField%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20value%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%3ETitle%3C%2FSPAN%3E%3CSPAN%3E%7D%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20required%3C%2FSPAN%3E%3CSPAN%3E%3D%3C%2FSPAN%3E%3CSPAN%3E%7Btrue%7D%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20onChanged%3C%2FSPAN%3E%3CSPAN%3E%3D%3C%2FSPAN%3E%3CSPAN%3E%7Bthis%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3EhandleTitle%3C%2FSPAN%3E%3CSPAN%3E%7D%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%26gt%3B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%26lt%3B%3C%2FSPAN%3E%3CSPAN%3EToggle%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20defaultChecked%3C%2FSPAN%3E%3CSPAN%3E%3D%3C%2FSPAN%3E%3CSPAN%3E%7Bfalse%7D%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20onText%3C%2FSPAN%3E%3CSPAN%3E%3D%3C%2FSPAN%3E%3CSPAN%3E%22On%22%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20offText%3C%2FSPAN%3E%3CSPAN%3E%3D%3C%2FSPAN%3E%3CSPAN%3E%22Off%22%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20label%3C%2FSPAN%3E%3CSPAN%3E%3D%3C%2FSPAN%3E%3CSPAN%3E%22With%20inline%20label%20and%20without%20onText%20and%20offText%22%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20onChanged%3C%2FSPAN%3E%3CSPAN%3E%3D%3C%2FSPAN%3E%3CSPAN%3E%7Bthis%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3E_getStatus%3C%2FSPAN%3E%3CSPAN%3E%7D%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%26gt%3B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CSPAN%3EPanel%3C%2FSPAN%3E%3CSPAN%3E%26gt%3B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CSPAN%3Ediv%3C%2FSPAN%3E%3CSPAN%3E%26gt%3B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%26lt%3B%3C%2FSPAN%3E%3CSPAN%3EListView%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20items%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%3Eselection%3C%2FSPAN%3E%3CSPAN%3E%7D%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20viewFields%3C%2FSPAN%3E%3CSPAN%3E%3D%3C%2FSPAN%3E%3CSPAN%3E%7Bthis%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3E_viewFields%3C%2FSPAN%3E%3CSPAN%3E%7D%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20iconFieldName%3C%2FSPAN%3E%3CSPAN%3E%3D%3C%2FSPAN%3E%3CSPAN%3E%22ServerRelativeUrl%22%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%26gt%3B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CSPAN%3Ediv%3C%2FSPAN%3E%3CSPAN%3E%26gt%3B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CSPAN%3Ediv%3C%2FSPAN%3E%3CSPAN%3E%26gt%3B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CSPAN%3Ediv%3C%2FSPAN%3E%3CSPAN%3E%26gt%3B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20%3CSPAN%3Ediv%3C%2FSPAN%3E%3CSPAN%3E%26gt%3B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E)%3B%3CBR%20%2F%3E%3C%2FSPAN%3E%3CSPAN%3E%7D%3C%2FSPAN%3E%3C%2FSPAN%3E%3C%2FSPAN%3E%3C%2FSPAN%3E%3C%2FSPAN%3E%3C%2FSPAN%3E%3C%2FSPAN%3E%3C%2FPRE%3E%3CP%3EAfter%20updating%20the%20state%20the%20following%20method%20save%20the%20data%20in%20the%20list%2C%20this%20is%20called%20when%20the%20user%20clicks%20on%20the%20Save%20button%20of%20the%20Panel%20component%3A%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CDIV%3E%3CPRE%3E%3CSPAN%3Eprivate%3C%2FSPAN%3E%20%3CSPAN%3EcreateItem%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%3CSPAN%3E%20%20%20%20%20%20%20%20%20pnp%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%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'yesno'%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%3CSPAN%3E%20%20%20%20%20%20%20%20%20%20%20%20%20Title%3A%3C%2FSPAN%3E%20%3CSPAN%3Ethis%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3Estate%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3ETitle%3C%2FSPAN%3E%3CSPAN%3E%2C%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20%20%20%20%20%20%20%20test%3A%3C%2FSPAN%3E%20%3CSPAN%3Ethis%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3Estate%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3EActive%3CBR%20%2F%3E%3C%2FSPAN%3E%3CSPAN%3E%20%20%20%20%20%20%20%20%20%7D)%3B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20%20%20this%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3E_hidePanel%3C%2FSPAN%3E%3CSPAN%3E()%3B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20%20%20this%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3E_buttonClickHandler%3C%2FSPAN%3E%3CSPAN%3E()%3B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%7D%3C%2FSPAN%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3CSPAN%3Eprivate%3C%2FSPAN%3E%20%3CSPAN%3E_buttonClickHandler%3C%2FSPAN%3E%20%3CSPAN%3E%3D%3C%2FSPAN%3E%3CSPAN%3E%20()%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%3CSPAN%3E%20%20%20%20%20%20%20console%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3Elog%3C%2FSPAN%3E%3CSPAN%3E(%3C%2FSPAN%3E%3CSPAN%3E'update%20called'%3C%2FSPAN%3E%3CSPAN%3E)%3B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20%20this%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3Erender%3C%2FSPAN%3E%3CSPAN%3E()%3B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%7D%3C%2FSPAN%3E%3C%2FPRE%3E%3CP%3EThe%20last%20task%20of%20the%20createItem()%20is%20call%20the%20_buttonClickHandler()%20to%20re-render%20the%20webpart.%26nbsp%3B%3C%2FP%3E%3CP%3EI%20can%20see%20the%20message%20from%20the%20console.log%20but%20the%20webpart%20doesn't%20refresh.%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EAny%20idea%20what%20is%20wrong%3F%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EBest%20regards%3C%2FP%3E%3CP%3EAmerico%3C%2FP%3E%3C%2FDIV%3E%3C%2FDIV%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-518191%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EDeveloper%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E
Highlighted
Regular Contributor

Hi,

 

I have a webpart which is very simple, it reads data from a list and allow the user select a Yes/no value and save the selection back to the list in a Yes/no column. 

 

The webpart is working almost perfect. 

The problem is when the user has made his choice and save the selections, the webpart doesn't reload, instead I need to reload the page to see the newly added data rendered in the webpart. 

 

To show the options that the user can select I am using a Panel control from Ms fabric UI. 

I tried with shouldComponentUpdate()  but for some reason it block the panel and is impossible to open it. 

I also tried with componentDidUpdate() but nothing happens, I still be forced to reload the page to see the new values. 

 

Then searching more in internet I found this answer in the community: How to refresh SPFX webpart

and I followed the last instructions but still nothing happens. 

 

This is my code: 

The render method (I post the entire method in case there is something wrong in it): 

public render(): React.ReactElement<IYesnoProps> {
return (
<div className={ styles.yesno }>
<div className={ styles.container }>
<div className={ styles.row }>
<div className={ styles.column }>
<div>
<DefaultButton
data-automation-is="test"
text="Create new manager"
onClick={this._showPanel}
/>
<Panel
isOpen={this.state.isOpen}
type={PanelType.medium}
onDismiss={this._hidePanel}
headerText="Create new manager"
closeButtonAriaLabel="Close"
onRenderFooterContent={this._onRenderFooterContent}
>
<TextField
value={this.state.Title}
required={true}
onChanged={this.handleTitle}
/>
<Toggle
defaultChecked={false}
onText="On"
offText="Off"
label="With inline label and without onText and offText"
onChanged={this._getStatus}
/>
</Panel>
</div>
<ListView
items={this.state.selection}
viewFields={this._viewFields}
iconFieldName="ServerRelativeUrl"
/>
</div>
</div>
</div>
</div>
);
}

After updating the state the following method save the data in the list, this is called when the user clicks on the Save button of the Panel component: 

 

private createItem(): void {
pnp.sp.web.lists.getByTitle('yesno').items.add({
Title: this.state.Title,
test: this.state.Active
});
this._hidePanel();
this._buttonClickHandler();
}

private _buttonClickHandler = (): void => {
console.log('update called');
this.render();
}

The last task of the createItem() is call the _buttonClickHandler() to re-render the webpart. 

I can see the message from the console.log but the webpart doesn't refresh. 

 

Any idea what is wrong?

 

Best regards

Americo

0 Replies