Get and Set data in Aura Component

Let’s understand this with a use case to fetch data from the Salesforce org show all the contacts over the table and create a form to create contacts in Salesforce Org and also show them over the table and also adds a delete functionality in the table

Component- 

<aura:component implements="flexipage:availableForAllPageTypes,
flexipage:availableForRecordHome,

force:hasRecordId" controller="ContactList">
    <aura:attribute name="nameOfCon"    type="String" />
    <aura:attribute name="mobileNumber" type="Integer" />
    <aura:attribute name="myData"       type="Contact[]"/>
    
     <Center ><h1 class="heading"><b>Salesforce Sky</b></h1></Center>
    
    <!-- FORM -->
    <div class="slds-grid slds-box slds-p-top_none slds-gutters" style="height:700px">
        <div class="slds-col blue slds-align_absolute-center ">
            <div class="white slds-align_absolute-center">
                <div class="form ">
                    <center><h1 style="font-size:30px">New Contact</h1></center><br/>
                    <lightning:input class="input" aura:id="Name" label="Name" 
required="true" value="{!v.nameOfCon}"/>
                    <lightning:input type="tel" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" 
class="input" aura:id="Mobile" label="Mobile" required="true" value="{!v.mobileNumber}"/><br/>
                    <center><lightning:button class="button" label="Add" type="button" 
onclick="{!c.AddContact}"/></center>    
                </div>
            </div>
        </div>
        
        <!-- TABLE -->
        <div class="slds-col pink">
            <div class="" >
                <table class="slds-table slds-table_cell-buffer 
slds-table_bordered slds-table_striped" style="margin-top:140px; align:center;">
                    <tr>
                        <th>S.No</th>
                        <th>Name</th>
                        <th>Mobile</th>
                        <th>Action</th>
                    </tr>
                    <aura:iteration var="student" indexVar="index" items="{!v.myData}">
                        <tr>
                            <td>{!index + 1} </td>
                            <td>{!student.names}</td>
                            <td>{!student.mobile}</td>
                            <td><lightning:button class="button" 
label="Delete" title="{!index}" onclick="{!c.DelContact}"/> </td>
                        </tr> 
                    </aura:iteration> 
                </table>
            </div> 
        </div>
    </div>
</aura:component>

Controller – 

({
    AddContact : function(com, event, helper) {
       helper.CreateContact(com, event, helper);
        
    },
    
    DelContact : function(com,event){
        var selectCon = event.getSource().get("v.title");
        console.log(selectCon);
        var myList = com.get("v.myData");
        myList.splice(selectCon, 1);
        com.set("v.myData",myList);
        console.log(myList);
    }
})

Helper – 

({
	CreateContact : function() {
		 var data = com.get("v.myData");
        
        if(data){
            data.push({ 
                names:com.get("v.nameOfCon"),
                mobile:com.get("v.mobileNumber")
            })
            console.log('if vala ');
        }
        else{
            data =[];  
            data.push({ 
                names:com.get("v.nameOfCon"),
                mobile:com.get("v.mobileNumber")
            })
            console.log('else vala ');
        }
        com.set("v.myData",data)  ;
        //step 1
        var eveVal = com.get('c.createContactSingle');
        //step 2
        eveVal.setParams({
            con : com.get('v.myData')
        });
        
        //step 3
        eveVal.setCallback(this, function(response){
            var state = response.getState();
            if(state === 'SUCCESS' ||state === 'DRAFT'){
                var responseValue = response.getReturnValue();
                compEve.fire();
            }    
        },'ALL');
        
        //step 4
        $A.enqueueAction(eveVal);
        
        
        
      com.set("v.nameOfCon","");
      com.set("v.mobileNumber","");
        console.log(data);
        

	}
})

Style – 

.THIS .heading { font-size:30px;
}

.THIS .blue{
    background-color:#00FFFF;
    width:40%;
    height:100%;
    border-color:black;
}
.THIS .form{
    width:290px;
}

.THIS .white{
    background-color:white;
    height:70%;
    width:65%;
    border-radius:20px;
}
.THIS .pink{
    background-color:White;
    width:60%;
    height:100%;
    border-color:white;
}
.THIS .button{
    background-color: blue; 
    border-radius: 0px;
    color: white;
    padding: 12px 28px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 20px;
    width: 120px;
    height:50px;   
}

Apex Controller – 

public class ContactList {
 @AuraEnabled
    public static List<Contact> getContactList(String accountId){
        List<Contact> contactList = new List<Contact>([SELECT FirstName, LastName, Id, Name, Email, Phone 
                                                       From Contact 
                                                       WHERE Email !=null
                                                       AND AccountId = :accountId]);
        return contactList;
    }
    
    @AuraEnabled
      public static Contact createContactSingle(Contact con){
        insert con;
        return con;
    }
}

Preview –