ProblemSuggestionList.tsx

import Markdown from 'markdown-to-jsx';
import React from 'react';
import type { Suggestion } from 'src/types';

export interface ProblemSuggestionListProps {
  intro: string;
  suggestions: Suggestion[];
}

export const ProblemSuggestionList: React.FC<ProblemSuggestionListProps> = ({
  intro,
  suggestions,
}: ProblemSuggestionListProps) => {
  return (
    <>
      <p>
        <Markdown>{intro}</Markdown>
      </p>
      <ul>
        {suggestions.map((suggestion: Suggestion, i: number) => (
          <li key={i}>
            <a href={suggestion.link} target="_blank">
              {suggestion.description.split('<br>').map(function(item) {
                return (<span>{item}<br/></span>)
              })}
            </a>
          </li>
        ))}
      </ul>
    </>
  );
};

export default ProblemSuggestionList;