Current Record is available in doinit method but not in button handler method

Question

I am able to get the current record id of a record in my controller method written for doinit, but I have another method for handling a button click, I could not get the current record id. I am getting here Undefined value.

doInit :function(component, event, helper) {
       console.log(component.get("v.recordId"));
       alert(component.get("v.recordId"));
},
 create : function(component, event, helper) {
   alert(component.get("v.recordid"));
}

I have implemented the interface force:hasRecordId in my component. I am creating a modal popup using SLDS and the button is defined inside the SLDS code. This is called as a quick action on a page layout.

Here is my code:-

<div class="slds-m-around--xx-large">
        <!--###### MODAL BOX Start From Here ######--> 
        <div role="dialog" tabindex="-1" aria-labelledby="header99" class="slds-modal slds-fade-in-open ">
            <div class="slds-modal__container">
                <!-- ###### MODAL BOX HEADER Part Start From Here ######-->
                <div class="slds-modal__header">
                    <button class="slds-button slds-modal__close slds-button--icon-inverse" title="Close" onclick="{!c.closeModel}">
                        X
                        <span class="slds-assistive-text">Close</span>
                    </button>
                    <h2 id="header99" class="slds-text-heading--medium">Creating Custom Note</h2>
                </div>
                <!--###### MODAL BOX BODY Part Start From Here ######-->
                <div class="slds-modal__content slds-p-around--medium">
                    <div class="slds-page-header">
                        <div class="slds-media">

                            <div class="slds-media__body">
                                <h1 class="slds-page-header__title slds-truncate slds-align-middle" title="Requests User Guides">New Note</h1>
                            </div>
                        </div>
                    </div>
<div class="slds-modal__footer">
                        <div class="col-md-4 text-center">
                            <ui:button class="btn btn-default" press="{!c.create}">Create</ui:button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

What is the reason behind it? I tried but failed to get any clue. Maybe I am missing somewhere.

Answer 1

It's case sensitive, you have recordid and recordId. recordId is what you're using in your init method so that's probably the correct casing.

Try

create : function(component, event, helper) {
   alert(component.get("v.recordId"));
}