We are going to build a React-Django to do app using modals to contain our forms and delete options. In our app you we will be able to click create, update or delete and handal all of our actions in a modal pop up. Once our action is complete our content will re-render.
What we have so far is a full stack application that displays our to do list from our database without any of the actions working yet.
- Loading Data into modals
- Performing CRUD with modals
We will start by adding in modal’s and displaying data according to the modal that was clicked. We will then load data and forms into our modal.
Finally we will add functionality to our modals that will allow us to Create/Update/Delete items.
1 – Modals
Lets get our modal working. Depending on which button is clicked we will return a modal with different content. If we click create the modal content will say “Create Item” and so on.
Modal life cycle:
- Modal will sit inside the list compoent with the inishial state being “hidden”
- On click one one of the buttons the modals state will change to the type of button was click (Create/Update or Delete).
- On the state of hidden the modal returns nothing so you cannont see it. On the state of “Create” we will simply return and “<h3>” tag with the title “Create Item” and so on for “Update” and “Delete”
Our modal will receive the state as a prop which it will then use to evaluate the state.
Here is Our modal so far some CSS to go with it.
No lets add some functionality that will handle how our modal opens and closes and chooses which state to pass on.
Firs lets build and bind in our open and close modal function.
open modal will be activated on the click of a button. On click it will be given the value of the type of state (First parameter). The second parameter (ID) we will use later to call data for the update and delete calls. This will be set to null for “Create”.
When clicked this is what our modals will look like
We need a way to close the modal so lets add a close button into our modal. In order for this button to change the state of our modal to “Hidden” we need to pass in our close modal function as a prop to our modal.
No we can call our close modal function from our modal.
2 – Loading Data into our modals
Ok now its time to add in our form and load in some data when we click to update or delete a item. Our list component hold the state of each clicked items id. This is updated each time we click the open modal function. We will need to pass this id into our modal, then in our modal load in new data each time this state is changed.
No lets give our modal its own state. The id will be the prop that was passed in when our modal was opened and item will be updated when we make a call to our API to retrieve more information.
First lets create a function that will update our modal Items state, then create a condition to call this only when we recieve a new prop.
We keep our “if” condition in here because we done want this load funcition getting called if we open a “create modal” type. This would lead to an error because the “null” value cannot work in our url parameter.
Now lets call this method and create a form.
We cant use “componentWillMount” because our component is only mounted in the beginning and would not update when we open our modal. We also only want to update when a NEW id is getting passed in because this would create an infinite recursion of updates.
Lets test this with the update form by setting the form value to the states item property.
Now that this works lets give us a way to update the form fields “handleInputChange” function.
Bind this and add it to the form field.
At this point i ran into an issue that was unique modals. Because modals update only on prop changes and because setting state within the “componentWillUpdate” method would create an infinite recursion, when tried to click “create” the last modals information would still be there. To fix this we needed a way to clear the modals state each time we were done using it.
We added two new functions. A clearForm function and a closeHandler that would call both the clearForm function and the close modal function. We then replace the close modal on the events and set it to our new closeHandler.
3 -Performing CRUD with modals