Redirects - Making the App Feel Like an App!

Today I'm adding a feature that will redirect the user to a different component after a form is successfully submitted. A redirect is used when the user completes an action, like submitting a form, and the action causes a new page or view to render on the screen. There are several ways to handle redirects with React. I'm going to use a technique where I use a redirect property in the state of the component. When a form is submitted, I'm going to use the ensuing promise chain and the setState() method in React to change the value of redirect, which will prompt a Redirect in the render method.

I'll begin with the EditGroup component. After the user submits the form, I want to the app to render the Group component of the group that they just edited. Right now there isn't any UI update when a form is submitted. I can see the success or failure appear in the console using console.log, but we want feedback for the user after the action success or failure. Adding the redirects makes the app responsive and enable the user to see their updates in real time.

I add a new property called 'redirect' and set the default value as false. My goal is to redirect the user back to the Group component on successful submit, so I move down into the handleSubmit method and add a new promise using .then(), and invoke the setState() function to set redirect to true. On a successful form submit I should see redirect update to a true value while looking at the state of the EditGroup component in the React dev tools. I do a simple test and when I click the submit button, I can indeed see redirect update to true in the state of the component.

Now that I've confirmed that the state of the component is updating correctly I need to actually add the redirect to the render function. I start by importing Redirect from react-router-dom at the top of the file. Next, I move down into the render function and add a new conditional for if this.state.redirect is true, redirect to a given pathname and send along the this.state.group object as props. Below on the left, the Redirect in the render function is highlighted. I also do some de-structuring to clean up the code and make it a bit easier to understand, as seen on the image to the right.

I head over to the browser and go for a test. I start by making a simple update to the 'about' section of the Skiing group, and it works! When I hit submit, I'm redirected back to the Skiing group page, and I can see that the update that I've made is there! The three images below illustrate the initial Skiing group, the update to the About section, and the updated Skiing group. I also navigate back to the Groups list and then click the Skiing group again, and sure enough my edit is there! I go ahead and commit the changes.

Next I want add the same functionality for the AddGroup component. On successful submit I want the user to be redirected to the newly created group's page. I start by adding a redirect property to the state, with a default value of false. I realize that this is going to be trickier than it was in EditGroup since a newly created group doesn't have an ID until the group is successfully added to the backend, but I'm confident that I can figure out a way to make this work.

The updated axios call which will set the newId property to the value of response.data.group.id

I remember that I do have access to the response data from the API in the promise chain following the axios call. I add the response as a parameter to the first .then() statement after the axios call. I also realize that I can use a new property in my state, let's call it newId, which will be the ID of the newly created group. This isn't something the user enters in the form, but I can access the id by setting response.data.group.id as the value of the newId key in my setState function (see image). I also realize that I can just use newId instead of redirect in my state. If newId is true (aka a value) then I can redirect to the new Group component using the same technique that I used in the EditGroup component. The base state of newId is null, which means the group has not yet been created (aka the user is still filling out the form.)

Now I begin testing. I can still successfully create a new group (yay I didn't break anything yet!), and the UI is redirecting to the new Group component with the correct data.

But then I try to edit a newly created group and find a problem.

Using newId to direct to the newly created group, but missing something from the group object!

The problem is that the group ID is not being sent in the props along with all the other group data. I know this because, looking at the url, there is an 'undefined' where there should be the group ID number. This makes sense, since id is not a property in the group object in the state of the AddGroup component. I think for a bit and realize that I can pass the newId property from the state through to the Group component as the ID for the group object, it'll just take a bit of JavaScript.

Using the spread operator, and then adding the id property.

Utilizing the spread operator I pass along the entire group object from this.state along with an additional property, the id property, with the value of newId. This way the state of my Group component will also have the ID property. I do another test and find that the EditGroup component is now working properly!

The last redirect feature that I want to add is a redirect on successful delete. Currently the delete button in the Group component is working, but nothing happens on the UI and only a message pops up in the console that the group has been deleted. I start by opening up the Group component. I'm going to use a similar technique here where I will have a property in state called redirect with a default value of false. In my handleDelete function I add setState() to the promise chain and, using setState, set redirect to true. Since redirect is now true, the Groups list component will be rendered on screen. I don’t need to send any props this time as the Groups component uses the componentDidMount() method to populate the list of groups and does not rely on props for data.

The relatively simple redirect to the Groups component with no props.

I jump back into the browser and test everything out. I create a few new groups, make edits, delete groups, and determine that everything is working like I'm hoping. Now that the redirects are complete the app is much more intuitive, and performing actions generates feedback for the user.