TopicCard_validated.jsx

render() {
    const {
      title,
      description,
      linkUrl,
      linkAriaLabel,
      headingLevel
    } = this.props;

    const validHeadingLevels = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
    const safeHeading = headingLevel ? headingLevel.toLowerCase() : '';
    const Title = validHeadingLevels.includes(safeHeading) ? safeHeading : 'p';

    return (
      <div className='topic-container'>
        <div className='topic-info-wrapper'>
          <Title>{title}</Title>
          <p>{description}</p>
        </div>
        {!linkUrl ? null : (
          <div className='link-wrapper'>
            <Link to={linkUrl} aria-label={linkAriaLabel}>
              View Topic
            </Link>
          </div>
        )}
      </div>
    );
  }