vscode-extension-samples/notebook-renderer-react-sample/src/client/render.tsx

/* eslint-disable @typescript-eslint/naming-convention */
import React from "react";
import type { RendererContext } from 'vscode-notebook-renderer';

interface IRenderInfo {
  container: HTMLElement;
  mime: string;
  value: GitHubIssuesValue[];
  context: RendererContext<unknown>;
}

interface GitHubIssuesValue {
	title: string;
	url: string;
  body: string;
}

export const IssuesList: React.FC<{info: IRenderInfo}> = ({info}) => {
    const issues = info.value.map(item => {
      return <tr>
          <td><a href={item.url}>{item.title}</a></td>
          <td>{item.body}</td>
        </tr>;
    });
    
    return <div>
      <table>
        <tr>
          <th>Issue</th>
          <th>Description</th>
        </tr>
        {issues}
      </table>
    </div>;
};

if (module.hot) {
  module.hot.addDisposeHandler(() => {
    // In development, this will be called before the renderer is reloaded. You
    // can use this to clean up or stash any state.
  });
}