diff --git a/2ndPage.js b/2ndPage.js new file mode 100644 index 0000000000000000000000000000000000000000..cf2beb651b57e58390409e012c2451facbc8772d --- /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 0000000000000000000000000000000000000000..8c94da44bfc4fa23d3ca5cf32709a2739a3a41b4 --- /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;