title: ImmutableJs - How to Retrieve Key Based On Position in Map
body: <p>Im using <a href="https://facebook.github.io/immutable-js" rel="nofollow noreferrer">immutableJs</a></p>
  
  <p>My state object looks like this:</p>
  
  <pre><code>export const initialToolbarState = Map({
      temSelectionCtrl : Map({
          temSelect : true,
      }),
      functionalCtrl : Map({
          addEle : true,
          grpSelect : true,
          drawShape : true
      }),
      operationalCtrl : Map({
          zoomIn : true,
           zoomOut : true,
           pan : true,
           temSide : true
      }),
      referenceCtrl : Map({
          saveCtrl : true
      })
  });
  </code></pre>
  
  <p>So there are objects with keys which have <code>boolean</code> values.</p>
  
  <p>I want to map (loop) over these objects &amp; get their <code>keys</code>. The <code>boolean</code> values tell whether to render the <code>key</code> or not. Immutable lets us map over <code>Map</code>s using its custom <code>map</code> function. So, the following works, however not as intended:</p>
  
  <pre><code>// map over the initialToolbarState Map object 
  let ctrls = initialToolbarState.map(( eachToolbar ) =&gt; {
    // map over the child Map objects like temSelectionCtrl, functionalCtrl, operationalCtrl etc
    return eachToolbar.map(( eachCtrl, i ) =&gt; {
      // get the key corresponding to 'eachCtrl' value
      let propKey = eachToolbar.keyOf( eachCtrl );
        // propKey is always the first property (1st prop) of 'eachToolbar'
          console.log( propKey );
  ...
  </code></pre>
  
  <p>Using <code>immutableJs</code>, is there a way to get the correct <code>key</code> corresponding to the currect 'eachCtrl' value within the loop? Could I make sure of the <code>i</code> to help pointing it towards the correct <code>value</code> for which to match the <code>key</code>?</p>