lab complete

src/components/Actors.js

@@ -1,8 +1,23 @@
+
 import React from "react";
 import { actors } from "../data";
 
 function Actors() {
-  return <div>{/*{code here}*/}</div>;
+  return  (
+    <div>
+      <h1>Actors Page</h1>
+      {actors.map((actor, index) => (
+        <div key={index}>
+          <h2>{actor.name}</h2>
+          <ul>
+            {actor.movies.map((movie, index) => (
+              <li key={index}>{movie}</li>
+            ))}
+          </ul>
+        </div>
+      ))}
+    </div>
+  );
 }
 
-export default Actors;
+export default Actors;

src/components/App.js

@@ -1,13 +1,21 @@
 import React from "react";
-import { Route, Switch } from "react-router-dom";
+import { BrowserRouter as Router, Route } from "react-router-dom";
 import NavBar from "./NavBar";
 import Home from "./Home";
 import Actors from "./Actors";
 import Directors from "./Directors";
 import Movies from "./Movies";
 
 function App() {
-  return <div>{/*{code here}*/}</div>;
+  return (
+    <Router>
+      <NavBar />
+      <Route path="/" exact component={Home} />
+      <Route path="/movies" exact component={Movies} />
+      <Route path="/directors" exact component={Directors} />
+      <Route path="/actors" exact component={Actors} />
+    </Router>
+  );
 }
 
 export default App;

src/components/Directors.js

@@ -1,8 +1,24 @@
+
 import React from "react";
 import { directors } from "../data";
 
 function Directors() {
-  return <div>{/*{code here}*/}</div>;
+  return (
+
+      <div>
+        <h1>Directors Page</h1>
+        {directors.map((director, index) => (
+          <div key={index}>
+            <h2>{director.name}</h2>
+            <ul>
+              {director.movies.map((movie, index) => (
+                <li key={index}>{movie}</li>
+              ))}
+            </ul>
+          </div>
+        ))}
+      </div>
+    );
 }
 
-export default Directors;
+export default Directors;

src/components/Home.js

@@ -1,7 +1,11 @@
+
 import React from "react";
 
 function Home() {
-  return <div>{/*{code here}*/}</div>;
+  return (
+  <div>
+    <h1>Home Page</h1>
+    </div>)
 }
 
-export default Home;
+export default Home;

src/components/Movies.js

@@ -1,8 +1,25 @@
+
+
 import React from "react";
 import { movies } from "../data";
 
 function Movies() {
-  return <div>{/*{code here}*/}</div>;
+  return (
+    <div>
+      <h1>Movies Page</h1>
+      {movies.map((movie, index) => (
+        <div key={index}>
+          <h2>{movie.title}</h2>
+          <p>Time: {movie.time} minutes</p>
+          <ul>
+            {movie.genres.map((genre, index) => (
+              <li key={index}>{genre}</li>
+            ))}
+          </ul>
+        </div>
+      ))}
+    </div>
+  );
 }
 
-export default Movies;
+export default Movies;

src/components/NavBar.js

@@ -1,8 +1,17 @@
+
 import React from "react";
 import { NavLink } from "react-router-dom";
 
 function NavBar() {
-  return <div>{/*{code here}*/}</div>;
+  return (<div >
+<NavLink to='/' >Home</NavLink>
+<NavLink to='/movies' >Movies</NavLink>
+<NavLink to='/directors' >Directors</NavLink>
+<NavLink to='/actors' >Actors</NavLink>
+
+  </div>
+
+  );
 }
 
-export default NavBar;
+export default NavBar;

src/index.js

@@ -9,3 +9,4 @@ ReactDOM.render(
   </Router>,
   document.getElementById("root")
 );
+