Added basic events and es6 modules

Author: michaelboateng1

src/Book.js

@@ -0,0 +1,37 @@
+import React from "react";
+
+const displayBookAuthor = (author) => {
+  alert(author);
+};
+
+const displayBookTitle = (title) => {
+  alert(title);
+};
+
+const Book = (props) => {
+  // console.log(props);
+  const { title, image, author, alt } = props;
+  return (
+    <article className="book">
+      <div className="wrapper">
+        <img
+          src={image}
+          alt={alt}
+          width={200}
+          height={100}
+          onMouseOver={() => displayBookTitle(title)}
+        />
+      </div>
+      <h1>{title}</h1>
+      <h4>{author}</h4>
+      <button type="button" onClick={() => console.log(title)}>
+        Show title
+      </button>
+      <button type="button" onClick={() => displayBookAuthor(author)}>
+        Show author
+      </button>
+    </article>
+  );
+};
+
+export default Book;

src/books_data.js

@@ -0,0 +1,16 @@
+export const books = [
+  {
+    id: 1,
+    image: "https://picsum.photos/200/100",
+    alt: "Book cover",
+    title: "The Way to The Jungle.",
+    author: "Michael Boateng",
+  },
+  {
+    id: 2,
+    image: "https://picsum.photos/200/100",
+    alt: "Book cover",
+    title: "The Way to Music",
+    author: "Blue Ivy Carter",
+  },
+];

src/index.js

@@ -4,23 +4,9 @@ import ReactDOM from "react-dom/client";
 // CSS
 import "./index.css";
 
-// Variables
-const books = [
-  {
-    id: 1,
-    image: "https://picsum.photos/200/100",
-    alt: "Book cover",
-    title: "The Way to The Jungle.",
-    author: "Michael Boateng",
-  },
-  {
-    id: 2,
-    image: "https://picsum.photos/200/100",
-    alt: "Book cover",
-    title: "The Way to Music",
-    author: "Blue Ivy Carter",
-  },
-];
+// JS
+import Book from "./Book";
+import { books } from "./books_data";
 
 function Booklist() {
   return (
@@ -33,18 +19,4 @@ function Booklist() {
   );
 }
 
-const Book = (props) => {
-  console.log(props);
-  const { title, image, author, alt } = props;
-  return (
-    <article className="book">
-      <div className="wrapper">
-        <img src={image} alt={alt} width={200} height={100} />
-      </div>
-      <h1>{title}</h1>
-      <h4>{author}</h4>
-    </article>
-  );
-};
-
 ReactDOM.createRoot(document.getElementById("root")).render(<Booklist />);