I have been trying to refactor this React component and thinking of ways to keep it DRY (don't repeat yourself). So what would be the best way to refactor this React component and keep it DRY?
Why do you think the component is not DRY? If your components like ScheduleTimeTextSpan are styled-components (which is my assumption) then they are just HTML elements with prefilled styles so it is okay to repeat them. The only thing that might help you DRY a little bit the component might be refactoring the code sections like:
<ScheduleTimeText>
Appointment due:
<ScheduleTimeTextSpan>
{content.appointmentDue}
</ScheduleTimeTextSpan>
</ScheduleTimeText>
which are repeated, to a self component:
const AppointmentDue = ({content}) => (
<ScheduleTimeText>
Appointment due:
<ScheduleTimeTextSpan>
{content.appointmentDue}
</ScheduleTimeTextSpan>
</ScheduleTimeText>
)
and then calling: <AppointmentDue content={content} />
This will save some lines of text.