React is not defined in Codesandbox, working fine locally

Question

Just wanted to host some sample code on Codesandbox, but this code in MyTable.tsx

import { FC, useState } from "react";

interface Row {
  id: number;
  content: string;
}

interface Props {
  initialRows: Row[];
}

export const MyTable: FC<Props> = function ({ initialRows }) {
  const [rows, setRows] = useState(initialRows);

  return (
    <table>
      <tbody>
        {rows.map((row, index) => (
          <tr key={`id${row.id}`}>
            <td>{row.content}</td>
            <td>
              <button
                type="button"
                onClick={() => {
                  const newRows = [...rows];
                  newRows.splice(index, 1);
                  setRows(newRows);
                }}
              >
                remove
              </button>
            </td>
          </tr>
        ))}
      </tbody>
    </table>
  );
};

ends up with React is not defined

That code works fine locally in VSCode and I can't figure out what the issue is. Full Codesanbox at https://codesandbox.io/s/delete-via-index-ctpes, the relevant file is src/MyTable.tsx. Would be glad about any hint, thanks.

Answer 1

You need to add to the header:

import React, { FC, useState } from "react";