This is an example about react component

ExerciseDetail.ts

import * as React from 'react';
import './ExerciseDetail.scss';
// ... more irrelevant imports for this example

interface ExerciseDetailsProp {
  exercise: Exercise
}

export const ExerciseDetail: React.FC<ExerciseDetailsProp> = ({exercise}) => (
  <div className="ExerciseDetail">
    <Image src={exercise.image} />
    {exercise.tags.map((tag) => <Chip>{tag}</Chip>)}
    <Content>
      { exercise.warning && <Message>{exercise.warning}</Message> }
      {/* irrelevant content for this example */}
    </Content>
  </div>
);

ExerciseDetail.displayName = 'ExerciseDetail';