How to solve this code duplication in an elegant way? [reactjs] - reactjs

Question

How would you simplify this small react component.
I'm not happy with repeating the html elements but I got no clean way to do it.
The reason it's not so obvious for me is because there is a small logic in the latter case that needs to be dealth with.
const RemainingSessionTime = (props: RemainingSessionTimeProps) => {
const { model, showTitle } = props;
if (model.remainingTime == -1) {
return (
<div className="gadget longContent remainingTime">
{showTitle && <div className="title">{title}</div>}
<div className="value">
<span>-</span>
</div>
</div>
);
}
const isCalculated = model.valueType === ValueTypes.CALCULATED;
return (
<div className="gadget longContent remainingTime">
{props.showTitle && <div className="title">{title}</div>}
<div className="value">
{isCalculated && <span>~</span>}
<span>{t}</span>
<span>{model.remainingTime < 3600 ? "m" : "h"}</span>
</div>
</div>
);
}

Answer 1

you can encapsulate the logic into another component like:
return (
<div className="gadget longContent remainingTime">
{showTitle && <div className="title">{title}</div>}
<div className="value">
<ShowTime remainingTime={model.remainingTime} isCalculated={false} t='t' />
</div>
</div>
);
The new ShowTime component:
function ShowTime({ remainingTime, isCalculated, t }) {
return isCalculated && remainingTime === -1 ? (
<span>~</span>
) : (
<span>
{t}
{remainingTime < 3600 ? "m" : "h"}
</span>
);
}

Answer 2

const RemainingSessionTime = (props: RemainingSessionTimeProps) => {
const { model, showTitle } = props;
if (model.remainingTime == -1) {
return (
<div className="gadget longContent remainingTime">
{showTitle && <div className="title">{title}</div>}
<div className="value">
<span>-</span>
</div>
</div>
);
}
const isCalculated = model.valueType === ValueTypes.CALCULATED;
return (
<div className="gadget longContent remainingTime">
{props.showTitle && <div className="title">{title}</div>}
<div className="value">
{isCalculated && <span>~</span>}
<span>{t}</span>
<span>{model.remainingTime < 3600 ? "m" : "h"}</span>
</div>
</div>
);
}