Как объединить html в компонент реакции (внутри стрелочной функции) с использованием компонентов класса

Question

Я новичок, чтобы отреагировать, и я не могу найти эту информацию, если бы вы могли намекнуть, я был бы признателен. Я использую машинописный текст, в моем ReviewContent я хочу указать в этом случае

      : review.content.substring(0, 300) + "...read more"}

не читать дальше ("... читать дальше"), а тег, чтобы элемент сворачивался и отображал больше обзора

       interface State {

  reviews: Review[];
}
export default class MoviePage extends Component<Props, State> {
  state: State = {
    
    reviews: [],
  };
  componentDidMount() {
    this.asyncAwaitFunc();
  }
  asyncAwaitFunc = async () => {
    try {
     
      const reviewmovie = await axios.get<ReviewResponse>(
        `https://api.themoviedb.org/3/movie/${this.props.match.params.id}/reviews?api_key=ae&language=en-US&page=1`
      );
      this.setState({

        reviews: reviewmovie.data.results,
      });
    } catch (error) {}
  };

  render() {
    const { id } = this.props;
    const { movie, reviews } = this.state;
      render() {
        return (
          <div>
            <ReviewGrid>
      {reviews.map((review) => (
        
            <ReviewContent>
              {review.content.length <= 300
                ? review.content
                : review.content.substring(0, 300)}
            </ReviewContent>
           
      ))}
    </ReviewGrid>
          </div>
        );
      }
    }
const ReviewContent = styled.p`
  color: rgb(102, 102, 102);

  font-size: 15px;

  padding: 15px;
  margin-bottom: 20px;
`;

Вот структура массива, который у меня есть в types.ts

       export interface AuthorDetails {
        name: string;
        username: string;
        avatar_path: string;
        rating: number;
    }

    export interface Review {
        author: string;
        author_details: AuthorDetails;
        content: string;
        created_at: Date;
        id: string;
        updated_at: Date;
        url: string;
    }