title: Is React Router causing my component to render twice?
body: <h2>Background</h2>
  
  <p>I have a list of items. If you click on a detail link under an item, you are taken to its page where it allows you to read and add comments about that particular item. Currently, the comments component is rendering both on the <a href="https://imgur.com/a/mxe2WxD" rel="nofollow noreferrer">index page</a> and on the <a href="https://imgur.com/a/YL8N3zI" rel="nofollow noreferrer">item details page</a>. It should only render on the latter.</p>
  
  <p>Can you help me figure out why?</p>
  
  <h2>Troubleshooting</h2>
  
  <p>I checked my routes and my Comments and Comment components but did not see any obvious errors. I saw <a href="https://stackoverflow.com/questions/45269961/react-router-component-rendering-twice">this post</a> about rendering components twice, but my situation is different because I have to use <code>render=</code> to pass down props. </p>
  
  <p>I'll admit, I have never tried to build a route like this, so maybe I am not approaching it properly. The one is question is the 2nd from the bottom in this list below.</p>
  
  <p><strong><em>Routes</em></strong></p>
  
  <pre><code>  render(){
      return(
        &lt;div&gt;
          &lt;Switch&gt;
            &lt;Route exact path='/' render={(routerProps) =&gt; &lt;Programs {...routerProps} programs={this.props.programs}/&gt;} /&gt; /&gt;
            &lt;Route exact path='/programs' render={(routerProps) =&gt; &lt;Programs {...routerProps} programs={this.props.programs} /&gt;} /&gt;
            &lt;Route path='/programs/new' render={(routerProps) =&gt; &lt;ProgramInput {...routerProps}/&gt;}/&gt;
            &lt;Route path='/programs/:id' render={(routerProps) =&gt; &lt;Program {...routerProps} programs={this.props.programs}/&gt;}/&gt;
            &lt;Route exact path='/programs/:id/comments' render={(routerProps) =&gt; &lt;Program {...routerProps} program={this.props.program}/&gt;}/&gt;
            &lt;Route exact path='/watchlist' render={(routerProps) =&gt; &lt;Program {...routerProps} programs={this.props.programs} /&gt;} /&gt;
          &lt;/Switch&gt;
        &lt;/div&gt;
      )
    }
  </code></pre>
  
  <p><strong>CommentsContainer</strong></p>
  
  <pre><code>class CommentsContainer extends React.Component {
    render(){
      return(
        &lt;div&gt;
          &lt;Comments comments={this.props.program &amp;&amp; this.props.program.comments}/&gt;
        &lt;/div&gt;
      )
    }
  }
  
  export default CommentsContainer
  </code></pre>
  
  <p><strong>Program (where CommentsContainer is rendered)</strong></p>
  
  <pre><code>I took out some of the Card code for brevity. There is More link inside the card that takes you to the item page. That part works fine.
  
  return(
          &lt;Fragment&gt;
            &lt;Grid.Column&gt;
              &lt;Card as='div'&gt;
               &lt;/Card&gt;
            &lt;/Grid.Column&gt;
  
            &lt;CommentsContainer program={program}/&gt;
  
          &lt;/Fragment&gt;
        )
      }
  </code></pre>
  
  <p><strong>Comments</strong></p>
  
  <pre><code>const Comments = (props) =&gt; {
    // console.log(props.comments &amp;&amp; props.comments.map(comment =&gt; console.log(comment))
    return(
      &lt;Comment.Group&gt;
  
  
        {props.comments &amp;&amp; props.comments.map(comment =&gt; &lt;CommentCard key={comment.id} comment={comment}/&gt;)}
  
  
      &lt;/Comment.Group&gt;
    )
  }
  
  export default Comments
  </code></pre>
  
  <p><strong><em>ComentCard</em></strong>
  I don't think the issue lies here, but <a href="https://github.com/koberlander/tv-list-frontend/blob/master/src/components/comments/CommentCard.js" rel="nofollow noreferrer">here's a link</a> if you need to see the file.</p>
  
  <h2>Backend</h2>
  
  <p>I am using Rails API for my backend. <a href="https://github.com/koberlander/tv-list-backend/blob/master/app/controllers/api/v1/comments_controller.rb" rel="nofollow noreferrer">Here is a link to my <code>comments_controller</code> if you want to take a peek.</a></p>
  
  <h3>Thank you for your time and advice!</h3>