Add event

Author: Dawid Adach

-

In this lesson, we will learn how to deal with Inputs. Inputs are very widely used components in web development. We use them everywhere. Starting from login forms, newsletter subscription forms, a new post editor, app configuration etc. 

  1. Import MDBInputs — make sure that you have imported the following components from the mdbreact library:

                import {
                    ...
                    MDBInput,
                    ...
                  } from "mdbreact";
                  
        
  1. Add the following to store input values within a state: 

            handleInputChange = inputName => value => {
                const nextValue = value;
                this.setState({
                  [inputName]: nextValue
                });
              };
              
     

Every time we update the value of an input, it will update the corresponding variable within our state object. We will see that in a minute.

  1. Add Inputs to our form inside the Modal Body:

            <MDBModalBody>
                  <form className="mx-3 grey-text">
                      <MDBInput
                        name="time"
                        label="Time"
                        icon="clock"
                        hint="12:30"
                        group
                        type="text"
                        getValue={this.handleInputChange("time")}
                      />
                      <MDBInput
                        name="title"
                        label="Title"
                        icon="edit"
                        hint="Briefing"
                        group
                        type="text"
                        getValue={this.handleInputChange("title")}
                      />
                      <MDBInput
                        name="location"
                        label="Location (optional)"
                        icon="map"
                        group
                        type="text"
                        getValue={this.handleInputChange("location")}
                      />
                      <MDBInput
                        name="description"
                        label="Description (optional)"
                        icon="sticky-note"
                        group
                        type="textarea"
                        getValue={this.handleInputChange("description")}
                      />
                    </form>
                  </MDBModalBody>
                  
      

Now we can run our app. When you open the Add event modal you will see our inputs. 

Inputs preview

Let's check how the handleInputChange() functions works. Let's print to console our state object every time this function is called. So, let's add thefollowing code to the function body:


            handleInputChange = inputName => value => {
                [...]
                console.log(this.state);
                };
                      
Preview:

Console log demo

Every time we update a value of any of the inputs, it's value is added to the state variable so we can use it when our form is be submitted. 

Since we have all of the inputs handled, let's remove console.log() and move to the last steps — to submit the form and add a new item to the list. 

  1. Add new function in our App class

            addEvent = () => {
                var newArray = [...this.state.events];
                newArray.push({
                  id: newArray.length ? newArray[newArray.length - 1].id + 1 : 1,
                  time: this.state.time,
                  title: this.state.title,
                  location: this.state.location,
                  description: this.state.description,
                  value: this.var > 5 ? "Its's grater then 5" : "Its lower or equal 5"
                });
                this.setState({ events: newArray });
                this.setState({
                  time: "",
                  title: "",
                  location: "",
                  description: ""
                });
              };
            
     

4.1 As we already know, we are not supposed to change the value of the state directly. Therefore we will create a copy of the existing events array: 


            var newArray = [...this.state.events];
      
This is a short way of copying arrays in react. 

4.2 Once we have our new array, we will add a new item to it using push(). The new element should have a unique id. For now, we can assume that ids are always equal to the position in array, therefore:

 
a) First, we will check if the array exists:

newArray.length?

b) If it exists (it has some elements, therefore the length of the array will be greater than 0), we will find the last element in the array:

newArray[newArray.length-1]
 
  get its id value, and increase by 1: 

newArray[newArray.length-1].id+1

c) In case our array doesn't exist (newArray.length = 0) we know that new element will be the first one so we will give it an id: 1

This is a so-called ternary operator often used in JS. The structure might be confusing, however, it's very handy and simple: 

                (condition to be checked) ? (resolve if true) : (resolve if false) 
        

Example: 

value:this.var>5?"Its's grater then 5":"Its lower or equal 5"

which is equivalent to the more readable version below: 

value: (this.var>5) ? ("Its's grater then 5") : ("Its lower or equal 5")

So depending on this.var, value will assigned one of the strings.

4.3 Then, after we are done with the calculation of the correct id, we assign the new values which were previously stored using handleInputChange() function and update our events array using the setState() method.

            this.setState({ events: newArray });
     
4.4 Finally, we have to clear our temporary variables (time, subject, location, and description) — otherwise, they will be re-used again when we call the function to add the second event. In other words. If we add the first event containing a description and second event without description, it would add the description to both events since the temporary variable wasn't reset.

            this.setState({
                time: "",
                subject: "",
                location: "",
                description: ""
              });
          
     
  1. Call the addEvent() function on form submit. 
The last step in this tutorial is to submit our form. Let's add a button to our Modal Footer:

      <MDBModalFooter className="justify-content-center">
          <MDBBtn
            color="info"
            onClick={() => {
              this.toggleModal();
              this.addEvent();
            }}
          >
            Add
          </MDBBtn>
        </MDBModalFooter>
  
And Voila! We have just created from scratch our app from lesson 2. 

Add new event preview

Our app is done, however, there are still a few more things which we should do:
  • change the type of the event properties (i.e. switch time to JS Date instead of string)
  • split our app into functional components (multiple files)
  • call an external API to get a real weather forecast 
  • add validation to our form (make sure that the user fills in all mandatory data)
  • handle duplicates

and a some more interesting stuff. We will learn all about this in Part 2 of our tutorial. 

If you want to be notified as soon as second part of the tutorial will be released you can subscribe to our newsletter.

Important!
I am very happy that you reached this far. I would like to thank you and ask you for a small favor. If you didn't rate the previous lesson yet please either spend a few minutes and rate them or rate this lesson (as a summary of the entire tutorial) using the stars below.

Your feedback is very important to us! Once you vote (it's just a single click!) there will be an optional form which lets you leave a comment to us. Please let us know what you liked and what you didn't like so to help us make the later tutorials even better!


Rate this lesson

Previous lesson Download Next lesson

Spread the word:
Do you need help? Use our support forum

About the author

Dawid Adach
For more than 5 years Dawid worked as an IT Consultant specializing in SOA/EAI/ESB in the banking domain. He gained experience working in countries like Netherlands, Belgium, Poland and India developing enterprise-class systems for the most prestigious companies. Since co-founding mdbootstrap.com & brandflow.net in 2016 he has been using and teaching technologies such as Angular, TypeScript, PHP, AJAX, Mongo, SQL, Hadoop Stack, Virtualization, Automation and many others...