A working, but ugly, way to show JSON in a web page

page.tsx

'use client';
import React, { useEffect, useState } from 'react';

function JsonTester() {
  const [json, setJson] = useState('');
  useEffect(() => {
    const getJson = async () => {
      var response = await fetch('https://swapi.dev/api/people/1');
      if (response.ok) {
        setJson(JSON.stringify(await response.json()));
      }
    };

    getJson();
  }, []);

  return (
    <div>
      {json.length > 0 && (
        <code>
          <pre>{JSON.stringify(json)}</pre>
        </code>
      )}
    </div>
  );
}

export default JsonTester;