Redirect to another component in spfx webpart recatjs class component

%3CLINGO-SUB%20id%3D%22lingo-sub-1309472%22%20slang%3D%22en-US%22%3ERedirect%20to%20another%20component%20in%20spfx%20webpart%20recatjs%20class%20component%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1309472%22%20slang%3D%22en-US%22%3E%3CP%3EI%20have%20developed%20an%20component%20which%20displays%20the%20table%20of%20data%20and%20an%20button%20which%20should%20leads%20to%20the%20another%20component%20to%20create%20an%20new%20item%20in%20the%20list.%3C%2FP%3E%3CP%3EI%20tried%20different%20approaches%20to%20get%20this%20component%20redirection%20on%20button%20click%20but%20not%20able%20to%20achieve%20this%20kind%20of%20redirection%20on%20button%20click%20event.%20With%20Router%20the%20thing%20is%20navigation%20always%20stays%20on%20the%20page.%3C%2FP%3E%3CP%3EIs%20this%20possible%20to%20achieve%20this%20task%20in%20spfx%20webpart%20with%20reactjs%3F%20please%20suggest.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-1309472%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3ESPFx%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1311994%22%20slang%3D%22en-US%22%3ERe%3A%20Redirect%20to%20another%20component%20in%20spfx%20webpart%20recatjs%20class%20component%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1311994%22%20slang%3D%22en-US%22%3EHi%2C%3CBR%20%2F%3EYou%20can%20navigate%20to%20different%20components%20in%20the%20same%20web%20part%20like%20navigating%20to%20a%20page%20based%20on%20the%20state%20variable.%20You%20can%20display%20or%20hide%20the%20component%20that%20you%20need%20to%20display%20based%20on%20the%20state%20variable.%20Once%20the%20button%20is%20clicked%2C%20hide%20the%20list%20component%20and%20then%20show%20the%20new%20item%20component.%20Please%20refer%20the%20below%20link%20to%20a%20simple%20poll%2C%20where%20questions%20and%20answers%20as%20one%20component%20and%20the%20chart%20results%20as%20another%20component%2C%20upon%20voting%20(click%20of%20a%20vote%20button)%20the%20answers%20were%20submitted%20and%20then%20showed%20the%20chart%20component.%20You%20can%20use%20the%20same%20logic%20in%20your%20solution%20too.%3CBR%20%2F%3E%3CA%20href%3D%22https%3A%2F%2Fgithub.com%2FSharePoint%2Fsp-dev-fx-webparts%2Ftree%2Fmaster%2Fsamples%2Freact-quick-poll%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fgithub.com%2FSharePoint%2Fsp-dev-fx-webparts%2Ftree%2Fmaster%2Fsamples%2Freact-quick-poll%3C%2FA%3E%3CBR%20%2F%3E%3CBR%20%2F%3EHope%20it%20helps%2C%20please%20like%20it%20or%20mark%20it%20as%20a%20solution%20if%20it%20resolves%20ur%20clarification%20or%20issue%3CBR%20%2F%3E-Sudharsan%20K...%3C%2FLINGO-BODY%3E
Highlighted
Occasional Visitor

I have developed an component which displays the table of data and an button which should leads to the another component to create an new item in the list.

I tried different approaches to get this component redirection on button click but not able to achieve this kind of redirection on button click event. With Router the thing is navigation always stays on the page.

Is this possible to achieve this task in spfx webpart with reactjs? please suggest.

1 Reply
Highlighted
Hi,
You can navigate to different components in the same web part like navigating to a page based on the state variable. You can display or hide the component that you need to display based on the state variable. Once the button is clicked, hide the list component and then show the new item component. Please refer the below link to a simple poll, where questions and answers as one component and the chart results as another component, upon voting (click of a vote button) the answers were submitted and then showed the chart component. You can use the same logic in your solution too.
https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples/react-quick-poll

Hope it helps, please like it or mark it as a solution if it resolves ur clarification or issue
-Sudharsan K...