javascript - Ember "Action passed is null or undefined in (action)" error -

i have ember component checkout-form contains logic handling checkout process. here’s simplified version of how i’m using it:

{{#checkout-form}}    {{#each model.courses.otherdates |date|}}     {{course-date model=date selectdate=(action selectdate) }}   {{/each}}  {{/checkout-form}} 

inside of checkout-form.js component have following action:

selectdate(day) {   this.set("startat", day.get("serverstring")) } 

and inside of course-date.js component have:

click () {   const coursestart = this.get('coursestart')   this.get('selectdate')(coursestart) } 

however, when running code error:

ember.debug.js:19818 assertion failed: action passed null or undefined in (action) <site@controller:checkout/date::ember389>. 

what missing here? passing action course-date component , not sure why asking controller?

reason error is,
accessing selectdate undefined in scope(ie., controller) if {{log 'selectdate value ' selectdate}} inside checkout-form print selectdate value undefined. if want access properties, actions defined in component component should yield values.

here twiddle demonstrates how can yield action component.

application.hbs

{{#checkout-form |selectdate| }}  {{!--   here context controller not checkout-form component  whatever want access component, component should yield values.  --}}  {{course-date selectdate=(action 'selectdateincontroller')}}  {{course-date selectdate=selectdate}} {{/checkout-form}} 

application.js

import ember 'ember'; export default ember.controller.extend({   appname: 'ember twiddle',   actions:{     selectdateincontroller(){       console.log(' selectdate in controller');     }   } }); 

templates/components/checkout-form.hbs - here yielding selectdate action

{{yield (action 'selectdate')}} 

components/checkout-form.js

import ember 'ember';  export default ember.component.extend({    actions:{     selectdate(){       console.log(' selectdate in checkout-form component');     }   } }); 

course-date.hbs - here using closure action passed component.

<button {{action selectdate}}> coursedate </button>