title: React - Map Over Array Of Components To Return
body: <p>Im trying to dynamically print a lot of components into a <code>li</code> list.</p>
  
  <p>In the parent component, the list <code>menuLinks</code> is an array. Each child of <code>menuLinks</code> is a component (LinkToChangePassword is a react functional component):</p>
  
  <pre><code>export default class Header extends Component{
    constructor(props){
      super( props );
    }
  
    render(){
      const menuLinks = [
        LinkToChangePassword,
        LinkToResetPassword,
        LinkToChangeEmail,
        LinkToLogOut
      ];
      return(
        &lt;div className="header"&gt;
          &lt;LinkToHome classAttr=""/&gt;
          &lt;h1 className=""&gt;{ this.props.heading }&lt;/h1&gt;
          &lt;DropDownMenu links = { menuLinks }/&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>In my child component, I'd like to attach these components:</p>
  
  <pre><code>export default class DropDownMenu extends Component{
    constructor( props ){
      super( props );
    }
  
    render(){
      let renderMenuItems = this.props.links.map(
        ( item, i ) =&gt; &lt;li className = "menuItem"
                           key = {`li${i}`}&gt;
                           {item}
                       &lt;/li&gt;
      );
      return &lt;ul className = "profileMenu"&gt;
              { renderMenuItems }
            &lt;/ul&gt;;
    }
  }
  </code></pre>
  
  <p>However, this doesnt work &amp; I get empty list.</p>