title: In Reactjs, when doing nested loop nothing is rendered
body: <p>I have a props which includes users array and messages array. Each user and message is related through a corresponding ID.</p>
  
  <p>I want to match these IDs so I can render messages with the user who posted it.</p>
  
  <p>The issue is nothing is rendering on screen but in the <code>console.log()</code>, I can see the results. Please, can someone shed some light into this.</p>
  
  <p>Also I'm not sure if I'm doing this the right way, so if you can show me a better way, I'll be glad. </p>
  
  <p>Thanks</p>
  
  <p>React:</p>
  
  <pre><code>import React, { Component } from 'react';
  
  class Messages extends Component {
    constructor(props) {
      super(props);
    }
  
    render() {
      let self = this;
  
      return (
        &lt;ul&gt;
        {
          this.props.messages.map((message, msg_key) =&gt; {
            self.props.members.forEach((member) =&gt; {
              if (member.id === message.userId) {
                console.log('inside foreach message.userId', message.userId); // this shows in console.
                console.log('inside foreach member.id', member.id); // this shows in console.
                return &lt;p&gt;member.id&lt;/p&gt; // nothing shows on screen.
              }
            })
          })
        }
        &lt;/ul&gt;
      );
    }
  }
  
  export default Messages;
  </code></pre>