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 && 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>