title: How I can prepend an element after each child in a react jsx render function?
body: <p>I have the following code:</p>
  
  <pre><code>class MessageList extends Component {
  
    render () {
      return (
        &lt;ul&gt;
          {
            this.props.messages.map((message) =&gt; {
              return &lt;Message key={message.id} message={message} /&gt;
            })
          }
          {
            this.props.replied_messages.map((message) =&gt; {
              return &lt;Message key={message.id} message={message} /&gt;
            })
          }
        &lt;/ul&gt;
      )
    }
  
  }
  </code></pre>
  
  <p>I want to add <code>this.props.replied_messages.map</code> after each child on <code>this.props.messages.map</code>. </p>
  
  <p>Example data:</p>
  
  <pre><code>let initialState = {
    messages: [
      {
        id: 0,
        timestamp: 1464092864076,
        text: 'holas'
      },
      {
        id: 1,
        timestamp: 1464125678372,
        text: 'other comment'
      }
    ],
    replied_messages: [
      {
        id: 0,
        message_replied_id: 0,
        timestamp: 1464092864076,
        text: 'eyyy'
      },
      {
        id: 1,
        message_replied_id: 0,
        timestamp: 1464125851108,
        text: 'a reply'
      },
      {
        id: 2,
        message_replied_id: 1,
        timestamp: 1464125909151,
        text: 'other comment reply'
      }
    ]
  }
  </code></pre>