-
Notifications
You must be signed in to change notification settings - Fork 0
/
page.tsx
59 lines (52 loc) · 1.51 KB
/
page.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
"use client";
import styles from "./page.module.css";
import { useEffect, useState } from "react";
type ExampleResponse = {
title: string;
numbers?: { plainNumber: number; string: string; differentIDs: string[] };
loading?: true;
};
export default function Home() {
const [state, setState] = useState<ExampleResponse>({
title: "Loading...",
loading: true,
});
const [stringified, setStringified] = useState("");
useEffect(() => {
async function fetchData() {
const res = await fetch("data.json");
setStringified(await res.clone().text());
setState(await res.json());
}
fetchData();
}, []);
return (
<main className={styles.main}>
<h1>{state.title}</h1>
{!state.loading && (
<section>
<h4>Original JSON string:</h4>
<pre className={styles.stringigied}>{stringified}</pre>
<hr></hr>
<h4>How this JSON is parsed:</h4>
<ul className={styles.list}>
<li>
<b>Plain number</b>:
<span className={styles.value}>{state.numbers?.plainNumber}</span>
</li>
<li>
<b>Stringified number</b>:
<span className={styles.value}>{state.numbers?.string}</span>
</li>
<li>
<b>Different IDs</b>:
<span className={styles.value}>
{state.numbers?.differentIDs.join(", ")}
</span>
</li>
</ul>
</section>
)}
</main>
);
}