Gfrktyl

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 && sportsDescription.sportsDate.length > 0 && 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 (

        <div className="sports-table action-shadow">

            <h4>{`Want some advice${sportsFire && sportsFire.length > 0 ? `, ${sportsFire}` : ''}?`}</h4>

            <p>Stay focused by setting a target date for completion of your sports.</p>

            <div className="secondary-links section_content">

                <a href="javascript:;" onClick={this.editHandler}>Set Target Date</a>

            </div>

        </div>

    );

}



sportsWalking() {

    const sportsFire = this.props.profile.firstName;

    return (

        <div className="sports-table action-shadow">

            <h4>{`Want a helpful tip${sportsFire && sportsFire.length > 0 ? `, ${sportsFire}` : ''}?`}</h4>

            <p>Add some momentum to your account by setting up automatic recurring deposits.</p>

            <div className="secondary-links section_content">

                <a href="javascript:;" onClick={this.editHandler}>Set Up Automatic Deposits</a>

            </div>

        </div>

    );

}



render() {

    const {sportsDescription, data} = this.props;

    const sportsAmount = parseFloat(sportsDescription.sportsAmount);

    const accumulatedAmount = data.summary.total || 0;



    return (

        <div>

            <div className="content-box action-shadow">

                {

                    sportsDescription.error ?

                        this.renderProgressError() :

                        this.renderProgress({

                            accumulatedAmount,

                            sportsAmount

                        })

                }

                <div className="section_content">

                    <h2>Your Goal Progress</h2>

                    <p>You have accumulated <strong className={accumulatedAmount >= 0 ? null : 'negative'}>

                        {moneyFormat(accumulatedAmount)}</strong> towards your sports of <strong>

                        {moneyFormat(sportsAmount)}</strong>.

                    </p>

                    {

                        sportsDescription.sportsDate && sportsDescription.sportsDate.length > 0 &&

                        sportsDescription.sportsDate !== '2199-01-01' && this.renderGoalDate(sportsDescription.sportsDate)

                    }

                    <div className="secondary-links section_content">

                        <a href="javascript:;" onClick={this.editHandler}>Edit Goal Details</a>

                    </div>

                </div>

            </div>

            {sportsDescription.sportsDate && sportsDescription.sportsDate.length > 0 && sportsDescription.sportsDate !== '2199-01-01' ?

                this.sportsWalking() : this.sportsRunning()}

        </div>

    );

This is what I mean with pureRenderComponent:

const SportsMoving = ({editHandler, sportsDescription, ...props }) => {



   const isRunning = sportsDescription.sportsDate && sportsDescription.sportsDate.length > 0 && sportsDescription.sportsDate !== '2199-01-01';

   const sportFire = props.profile.firstName || "";



   return (

        <div className="sports-table action-shadow">

            <h4>

            {

              isRunning 

                ? `Want some advice ${sportFire}?` 

                : `Want a helpful tip ${sportsFire}?`

            }

            </h4>

            <p>

            {

              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."

            }

            </p>

            <div className="secondary-links section_content">

               <a href="javascript:;" onClick={editHandler}>

               {

                 isRunning

                   ? "Set Target Date"

                   : "Set Up Automatic Deposits"

               }

               </a>

            </div>

        </div>

   )

}

now in your parentComponent you can use it like so:

     ...

     </div>

     <SportsMoving editHandler={this.editHandler} ...props />

</div>