title: how to append element in list while dynamically rendering in reactjs
body: <p>I want to show a list of messages which are in an array. In that list element contains a child element of "div". there need append more div in that child elements based on cases using the id of that particular div. </p>
  
  <p>But i've getting null from both <strong>document.getElementById</strong> and <strong>React.createRef()</strong> methods. I've tried below sample source,</p>
  
  <pre><code>this.state.messageDetail.map((message, index) =&gt; {
    return (
      &lt;React.Fragment key={index}&gt;
        {(index === 0 ||
          this.isSameDate(
            message.created_ts,
            this.state.messageDetail[index - 1].created_ts
          )) &amp;&amp; (
          &lt;li className="date"&gt;
            &lt;span&gt;{moment.unix(message.created_ts).format("MMM DD, YYYY")}&lt;/span&gt;
          &lt;/li&gt;
        )}
        {(index === 0 ||
          this.isSenderAndTimeSame(
            message.sender_id,
            message.created_ts,
            index
          )) &amp;&amp; (
          &lt;li className="user" ref={this.userDetailRef}&gt;
            &lt;React.Fragment&gt;
              &lt;div className="img"&gt;
                &lt;img
                  alt=""
                  src={
                    message.sender_id === null
                      ? CURRENT_USER_IMAGE
                      : BUCKET_PATH + "/" + this.state.currentTimeline.image
                  }
                /&gt;
              &lt;/div&gt;
              &lt;div id={"user_detail_" + index} className="details"&gt;
                &lt;div className="details-header"&gt;
                  &lt;span className="userName"&gt;
                    {message.sender_id === null
                      ? CURRENT_USER_NAME
                      : this.state.currentTimeline.name}
                  &lt;/span&gt;
                  &lt;span className="time"&gt;
                    {moment.unix(message.created_ts).format("hh:mm A")}
                  &lt;/span&gt;
                &lt;/div&gt;
                &lt;div className="message"&gt;{message.message_body}&lt;/div&gt;
              &lt;/div&gt;
            &lt;/React.Fragment&gt;
          &lt;/li&gt;
        )}
      &lt;/React.Fragment&gt;
    );
  });
  </code></pre>
  
  <p>In the above sample <strong>isSenderAndTimeSame</strong> method will create and append a <strong>new child element</strong> by find div id (ie.<strong>user_detail_3</strong>). I am getting null value.
  Kindly suggest your best way to do it.</p>
  
  <p>I'm adding a UI image:</p>
  
  <p><a href="https://i.stack.imgur.com/9ZUC9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9ZUC9.png" alt="ui image"></a></p>