sportsRunning and sportsWalking
This is what I mean with pureRenderComponent:

const SportsMoving = ({editHandler, sportsDescription, ...props }) =&gt; {

   const isRunning = sportsDescription.sportsDate &amp;&amp; sportsDescription.sportsDate.length &gt; 0 &amp;&amp; sportsDescription.sportsDate !== '2199-01-01';
   const sportFire = props.profile.firstName || "";

   return (
        &lt;div className="sports-table action-shadow"&gt;
            &lt;h4&gt;
            {
              isRunning 
                ? `Want some advice ${sportFire}?` 
                : `Want a helpful tip ${sportsFire}?`
            }
            &lt;/h4&gt;
            &lt;p&gt;
            {
              isRunning 
                ? "Stay focused by setting a target date for completion of your sports."
                : "Add some momentum to your account by setting up automatic recurring deposits."
            }
            &lt;/p&gt;
            &lt;div className="secondary-links section_content"&gt;
               &lt;a href="javascript:;" onClick={editHandler}&gt;
               {
                 isRunning
                   ? "Set Target Date"
                   : "Set Up Automatic Deposits"
               }
               &lt;/a&gt;
            &lt;/div&gt;
        &lt;/div&gt;
   )
}


now in your parentComponent you can use it like so:

     ...
     &lt;/div&gt;
     &lt;SportsMoving editHandler={this.editHandler} ...props /&gt;
&lt;/div&gt;