sportsRunning and sportsWalking There are two functions, sportsRunning and sportsWalking, that will render different text. For this, I am using an if condition at the bottom to display corresponding div:

{sportsDescription.sportsDate &amp;&amp; sportsDescription.sportsDate.length &gt; 0 &amp;&amp; sportsDescription.sportsDate !== '2199-01-01' ?
                this.sportsWalking() : this.sportsRunning()}`


Can you tell me how I can refactor the code?

sportsRunning() {
    const sportsFire = this.props.profile.firstName;
    return (
        &lt;div className="sports-table action-shadow"&gt;
            &lt;h4&gt;{`Want some advice${sportsFire &amp;&amp; sportsFire.length &gt; 0 ? `, ${sportsFire}` : ''}?`}&lt;/h4&gt;
            &lt;p&gt;Stay focused by setting a target date for completion of your sports.&lt;/p&gt;
            &lt;div className="secondary-links section_content"&gt;
                &lt;a href="javascript:;" onClick={this.editHandler}&gt;Set Target Date&lt;/a&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    );
}

sportsWalking() {
    const sportsFire = this.props.profile.firstName;
    return (
        &lt;div className="sports-table action-shadow"&gt;
            &lt;h4&gt;{`Want a helpful tip${sportsFire &amp;&amp; sportsFire.length &gt; 0 ? `, ${sportsFire}` : ''}?`}&lt;/h4&gt;
            &lt;p&gt;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={this.editHandler}&gt;Set Up Automatic Deposits&lt;/a&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    );
}

render() {
    const {sportsDescription, data} = this.props;
    const sportsAmount = parseFloat(sportsDescription.sportsAmount);
    const accumulatedAmount = data.summary.total || 0;

    return (
        &lt;div&gt;
            &lt;div className="content-box action-shadow"&gt;
                {
                    sportsDescription.error ?
                        this.renderProgressError() :
                        this.renderProgress({
                            accumulatedAmount,
                            sportsAmount
                        })
                }
                &lt;div className="section_content"&gt;
                    &lt;h2&gt;Your Goal Progress&lt;/h2&gt;
                    &lt;p&gt;You have accumulated &lt;strong className={accumulatedAmount &gt;= 0 ? null : 'negative'}&gt;
                        {moneyFormat(accumulatedAmount)}&lt;/strong&gt; towards your sports of &lt;strong&gt;
                        {moneyFormat(sportsAmount)}&lt;/strong&gt;.
                    &lt;/p&gt;
                    {
                        sportsDescription.sportsDate &amp;&amp; sportsDescription.sportsDate.length &gt; 0 &amp;&amp;
                        sportsDescription.sportsDate !== '2199-01-01' &amp;&amp; this.renderGoalDate(sportsDescription.sportsDate)
                    }
                    &lt;div className="secondary-links section_content"&gt;
                        &lt;a href="javascript:;" onClick={this.editHandler}&gt;Edit Goal Details&lt;/a&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
            {sportsDescription.sportsDate &amp;&amp; sportsDescription.sportsDate.length &gt; 0 &amp;&amp; sportsDescription.sportsDate !== '2199-01-01' ?
                this.sportsWalking() : this.sportsRunning()}
        &lt;/div&gt;
    );
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;