From 8e8d1d3548ec2d9b93b05763e9e8e1fade147dcb Mon Sep 17 00:00:00 2001
From: SurpriseChan <72516781+SurpriseChan@users.noreply.github.com>
Date: Mon, 6 Jan 2025 17:40:10 +0100
Subject: [PATCH] Add files via upload
---
2ndPage.js | 44 ++++++++++++++++++++++++++++++++++++++++++++
index.js | 22 ++++++++++++++++++++++
2 files changed, 66 insertions(+)
create mode 100644 2ndPage.js
create mode 100644 index.js
diff --git a/2ndPage.js b/2ndPage.js
new file mode 100644
index 0000000..cf2beb6
--- /dev/null
+++ b/2ndPage.js
@@ -0,0 +1,44 @@
+import React, { useEffect, useState } from 'react';
+import { useRouter } from 'next/router';
+
+function ApiPage() {
+ const [data, setData] = useState(null);
+ const router = useRouter();
+
+ useEffect(() => {
+ fetch('https://jsonplaceholder.typicode.com/comments')
+ .then((response) => response.json())
+ .then((data) => setData(data.slice(0, 10))) // Ersten 10 Daten
+ .catch((error) => console.error('Error fetching data:', error));
+ }, []);
+
+ const handleBack = () => {
+ router.push('/');
+ };
+
+ return (
+ <div>
+ <h1>API Seite</h1>
+ {data && data.length > 0 ? ( // Prüft ob data frei ist und ob es sachen hat
+ <div>
+ <h2>Ersten 10 Kommentare von der API:</h2>
+ <button onClick={handleBack}>Start Seite</button>
+ <ul>
+ {data.map((item) => (
+ <li key={item.id}>
+ <p><strong>Kommentar:</strong> {item.body}</p>
+ </li>
+ ))}
+ </ul>
+ </div>
+ ) : (
+ <p>Loading...</p>
+ )}
+ </div>
+ );
+}
+
+//<p><strong>Email:</strong> {item.name}</p> //Name
+//<p><strong>Email:</strong> {item.email}</p> //Email
+
+export default ApiPage;
diff --git a/index.js b/index.js
new file mode 100644
index 0000000..8c94da4
--- /dev/null
+++ b/index.js
@@ -0,0 +1,22 @@
+import React from 'react';
+import { useRouter } from 'next/router';
+
+function StartPage() {
+ const router = useRouter(); //Macht das man Seite Wechseln Kann
+
+ const handleNavigate = () => { // Geht zur Zweiten Seite
+ router.push('/2ndPage');
+ };
+
+ return (
+ <div>
+ <h1>Homepage</h1>
+ <button onClick={handleNavigate}>Zweite Seite</button>
+ <li>
+ <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_1280.jpg"/>
+ </li>
+ </div>
+ );
+}
+
+export default StartPage;
--
GitLab