title: Best way to replace c:forEach with JSF tag
body: <p>We are upgrading from jsf 1.2 to jsf 2. 
  We are using apache myfaces 2.1 and rich faces 4.3.</p>
  
  <p>Below is the xhtml code : </p>
  
  <pre><code> &lt;h:form&gt;
  &lt;h:panelGroup id="myMenu_type"&gt;
  
      &lt;div id="myMenu"&gt;
           &lt;ul&gt;
          &lt;c:forEach items="#{bean.data}" var="val"&gt;
                   &lt;li&gt;
                      &lt;h:commandLink value="#{val.label}" action="#{val.performAction}"/&gt;                                                                                                                    
                   &lt;/li&gt;
          &lt;/c:forEach&gt;
           &lt;/ul&gt;   
       &lt;/div&gt;
   &lt;/h:panelGroup&gt;
  &lt;/h:form&gt;
  </code></pre>
  
  <p>I am getting duplicate id error for above xhtml code . 
  Generated anchor link tag <code>&lt;a&gt;</code> gets duplicate id for above code.</p>
  
  <p>My question is , I want to get rid of c:forEach since I suspect that it is giving this duplicate id error as I am 
  mixing JSTL and JSF.</p>
  
  <p>What is the best JSF way to replace above construct ? I am trying it out with rich:dataTable.
  Is there any better alternative available ? 
  Please advice.
  Strange part is that with same code , above issue is not observed for JSF 1.2.</p>
  
  <p><strong>EDIT 1 :</strong></p>
  
  <p>I have tried using <code>&lt;rich:list&gt;</code> as well as <code>&lt;a4j:repeat&gt;</code>
  Below is the xhtml code </p>
  
  <pre><code>    &lt;div id="myMenu"&gt;
                       &lt;rich:list value="#{bean.data}" var="val"&gt;
                          #{val}
                       &lt;/rich:list&gt;
           &lt;/div&gt;
  </code></pre>
  
  <p>The strange thing is that when i print <code>#{val}</code> , it gives me value as <code>javax.faces.component.UIViewRoot@28d0bbac</code> whereas val is a normal 
  custom object.
  Because of above issue , i cannot call any method on val , it gives Property 'xx' not found on type javax.faces.component.UIViewRoot error.
  Above error is not observed when <code>&lt;c:forEach&gt;</code> is used.</p>
  
  <p><strong>EDIT 2 :</strong> </p>
  
  <p>I am attaching the generated html for the above xhtml code which gives a clear idea of where duplicate id error is coming. </p>
  
  <pre><code> &lt;tr&gt;&lt;td&gt;
  
    &lt;span id="form:myMenu_type"&gt;
      &lt;a href="#" onclick="return myfaces.oam.submitForm(id1);"&gt;One&lt;/a&gt;
      &lt;a href="#" onclick="return myfaces.oam.submitForm(id2);"&gt;Two&lt;/a&gt;
      &lt;a href="#" onclick="return myfaces.oam.submitForm(id3);"&gt;Three&lt;/a&gt;
      &lt;a href="#" onclick="return myfaces.oam.submitForm(id4);"&gt;Four&lt;/a&gt;
      &lt;a href="#" onclick="return myfaces.oam.submitForm(id5);"&gt;Five&lt;/a&gt;
      &lt;a href="#" onclick="return myfaces.oam.submitForm(id6);"&gt;Six&lt;/a&gt;
                  &lt;div id="myMenu"&gt;
                              &lt;ul&gt;
                                      &lt;li &gt;&lt;a href="#" onclick="return myfaces.oam.submitForm(id1);"&gt;One&lt;/a&gt;
                                      &lt;/li&gt;
                                      &lt;li &gt;&lt;a href="#" onclick="return myfaces.oam.submitForm(id2);"&gt;Two&lt;/a&gt;
                                      &lt;/li&gt;
                                      &lt;li &gt;&lt;a href="#" onclick="return myfaces.oam.submitForm(id3);"&gt;Three&lt;/a&gt;
                                      &lt;/li&gt;
                                      &lt;li &gt;&lt;a href="#" onclick="return myfaces.oam.submitForm(id4);"&gt;Four&lt;/a&gt;
                                      &lt;/li&gt;
                                      &lt;li &gt;&lt;a href="#" onclick="return myfaces.oam.submitForm(id5);"&gt;Five&lt;/a&gt;
                                      &lt;/li&gt;
                                      &lt;li &gt;&lt;a href="#" onclick="return myfaces.oam.submitForm(id6);"&gt;Six&lt;/a&gt;
                                      &lt;/li&gt;
                                      &lt;li &gt;&lt;a href="#" onclick="return myfaces.oam.submitForm(id7);"&gt;Seven&lt;/a&gt;
                                      &lt;/li&gt;
                                      &lt;li &gt;&lt;a href="#" onclick="return myfaces.oam.submitForm(id8);"&gt;Eight&lt;/a&gt;
                                      &lt;/li&gt;                               
                             &lt;/ul&gt;
                      &lt;/div&gt;
    &lt;/span&gt;       
  &lt;/td&gt;&lt;/tr&gt;
  </code></pre>
  
  <p>So as shown in above code , the anchor link tag <code>&lt;a&gt;</code> generated right below form:myMenu_type is the real issue. Its id is exactly the sameas one generated inside <code>&lt;li&gt;</code> - which is the correct one since i am using <code>&lt;li&gt;</code> explicitely. Why are anchor tags are getting generated is the real issue. Even if I dynamically assign ids inside <code>&lt;c:forEach&gt;</code> , same gets assigned to <code>&lt;a&gt;</code> links above giving same duplicate id error. I have used dummy ids to just explain the issue. Actual ids are dynamic ids generated by myFaces</p>