title: React - appendChild() a React Link tag to existing li appends [object, object]
body: <p>Have a loop that qualifies if an objects date key/value matches a date on a calendar.  If it does I want it to append a React Link tag to the corresponding li element.  The condition loop works fine, but when it appends the Link tag it is appending [object, object] since I am using createTextNode().</p>
  
  <p>Is there another way to append a Link tag to an existing li without using createTextNode()?</p>
  
  <p>I am done the usual google search with no luck.</p>
  
  <pre><code>for (let i = 0; i &lt; events.length; i++) {
       const link = (&lt;Link to={`/events/${events[i].eventId}`}&gt; . 
                    {events[i].title}&lt;/Link&gt;);
       const eventLink = document.createTextNode(link);
  
       if (events[i].date.slice(15) === day.toString()) {
       cell.appendChild(eventLink);
      }
  }
  </code></pre>
  
  <p>Need the li element to contain the React Link tag and not a text node.</p>
  
  <p>UPDATE
  Code with ReactDOM render and BrowserRouter but when I click the Link tag React doesn't render the route component.</p>
  
  <pre><code>for (let i = 0; i &lt; events.length; i++) {
      const link = (
                  &lt;&gt;
          {day.toString()}
          &lt;Link to={`/events/${events[i].eventId}`}&gt;{events[i].title}&lt;/Link&gt;
          &lt;/&gt;);
  
          const eventDate = events[i].date.split('-');
          const eventYear = eventDate[0];
          const eventMonth = eventDate[1];
          const eventDay = eventDate[2];
          if (eventDay === day.toString() &amp;&amp;
          eventMonth === (month + 1).toString() &amp;&amp;
          eventYear === year.toString()) {
          ReactDOM.render(&lt;BrowserRouter&gt;{link}&lt;/BrowserRouter&gt;, cell);
              }
          }
  </code></pre>