Setting the ID field of an element to a unique value in a reusable component

Question

Background

I am working on a reusable component that will be used multiple times throughout the application. I need the ID field that is produced by this component to have a unique value.

Example Code

Inside of my lightning view I have a id field,

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global">

<div id="{!v.wordCloudId}"></div>

</aura:component>

Inside of my controller I am trying to set the value of that field,

component.set('v.wordCloudId', id);

Errror

Access Check Failed! AttributeSet.get(): attribute 'wordCloudId' of component 'markup://c:DP_Word_Cloud {266:556;a}' is not visible to 'markup://c:DP_Word_Cloud {266:556;a}'.

Question

I have set values like this in other places in this application. Why is it not working here and how do I fix it?

Answer 1

You need to declare wordCloudId first and then you can set it.

<aura:attribute name="wordCloudId" type="Id" />