- )
-}
// App.js is the entry point to the rest of your app
+// You can see how this behavior is set up in index.js
// This is default behavior for create-react-app
function App() {
return (
- { /* The below array iterator (map), loops over every element in the charactersData array */}
- { /* The result of map is another array with new data */}
- { /* In our case, this new data is a Character component */}
-
- { /* Using array iterator (map) instead of repeating like below: */ }
+
Here is my header
+
+ } />
+ } />
+ } />
+
+
Here is my footer
);
}
diff --git a/src/components/character.js b/src/components/character.js
index d6069cf..fc2cc19 100644
--- a/src/components/character.js
+++ b/src/components/character.js
@@ -1,6 +1,7 @@
// You can import other components and use them too!
import Image from './image';
import LikeCounter from './like-counter';
+import {Link} from 'react-router-dom';
// A React component is just a function that returns some JSX
// Specifically, it returns some JSX with only one parent element
@@ -15,15 +16,10 @@ const Character = (props) => {
return (
<>
{props.name}
-
Blood type
-
{props.blood}
-
Birthday
-
{props.birthday}
-
Quote
-
{props.quote}
{/* Passing props from CharacterList even further down into LikeCounter */}
+ Go to character detail page of character with id {props.id}
)
diff --git a/src/index.js b/src/index.js
index d563c0f..03976ff 100644
--- a/src/index.js
+++ b/src/index.js
@@ -3,11 +3,14 @@ import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
+import {BrowserRouter} from 'react-router-dom';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
-
+
+
+
);
diff --git a/src/pages/character-detail.js b/src/pages/character-detail.js
new file mode 100644
index 0000000..a89a790
--- /dev/null
+++ b/src/pages/character-detail.js
@@ -0,0 +1,41 @@
+import {useParams} from 'react-router-dom';
+import axios from 'axios';
+import {useState, useEffect} from 'react';
+
+const CharacterDetail = () => {
+ const params = useParams();
+ //console.log(params)
+ const id = params.id;
+ console.log(id)
+
+ const [details, setDetails] = useState()
+
+ const getDetails = async () => {
+ const response = await axios.get(`https://my-json-server.typicode.com/TechmongersNL/fs03-react/characters/${id}`);
+ console.log(response.data);
+ setDetails(response.data);
+ }
+
+ useEffect(() => {
+ getDetails();
+ }, [])
+
+ return (
+ details ?
+ <>
+
{details.name}
+
Blood type
+
{details.blood}
+
Birthday
+
{details.born}
+
Patronus
+
{details.patronus}
+
Quote
+
{details.quote}
+
+ :
+ 'Loading...'
+ )
+}
+
+export default CharacterDetail;
\ No newline at end of file
diff --git a/src/pages/character-overview.js b/src/pages/character-overview.js
new file mode 100644
index 0000000..d72f9e0
--- /dev/null
+++ b/src/pages/character-overview.js
@@ -0,0 +1,11 @@
+import CharacterList from "../components/character-list";
+
+const CharacterOverview = () => {
+ return (
+
+
+
+ )
+}
+
+export default CharacterOverview;
\ No newline at end of file
diff --git a/src/pages/home-page.js b/src/pages/home-page.js
new file mode 100644
index 0000000..f22241d
--- /dev/null
+++ b/src/pages/home-page.js
@@ -0,0 +1,13 @@
+import {Link} from 'react-router-dom';
+
+const HomePage = () => {
+ return (
+
+
Home page
+
This is the Harry Potter home page!
+
+
+ )
+}
+
+export default HomePage;
\ No newline at end of file
+ :
+ 'Loading...'
+ )
+}
+
+export default CharacterDetail;
\ No newline at end of file
diff --git a/src/pages/character-overview.js b/src/pages/character-overview.js
new file mode 100644
index 0000000..d72f9e0
--- /dev/null
+++ b/src/pages/character-overview.js
@@ -0,0 +1,11 @@
+import CharacterList from "../components/character-list";
+
+const CharacterOverview = () => {
+ return (
+