diff --git a/src/Details.js b/src/Details.js
index d3433a62..87e6356c 100644
--- a/src/Details.js
+++ b/src/Details.js
@@ -2,6 +2,7 @@ import React from "react";
import pf from "petfinder-client";
import { navigate } from "@reach/router";
import Carousel from "./Carousel";
+import Modal from "./Modal";
const petfinder = pf({
key: process.env.API_KEY,
@@ -9,7 +10,7 @@ const petfinder = pf({
});
class Details extends React.Component {
- state = { loading: true };
+ state = { loading: true, showModal: false };
componentDidMount() {
petfinder.pet
.get({
@@ -39,12 +40,21 @@ class Details extends React.Component {
navigate("/");
});
}
+ toggleModal = () => this.setState({ showModal: !this.state.showModal });
render() {
if (this.state.loading) {
return
loading …
;
}
- const { media, animal, breed, location, description, name } = this.state;
+ const {
+ media,
+ animal,
+ breed,
+ location,
+ description,
+ name,
+ showModal
+ } = this.state;
return (
@@ -52,7 +62,17 @@ class Details extends React.Component {
{name}
{`${animal} — ${breed} — ${location}`}
+
{description}
+ {showModal ? (
+
+ Would you like to adopt {name}?
+
+
+
+
+
+ ) : null}
);
diff --git a/src/Modal.js b/src/Modal.js
new file mode 100644
index 00000000..e74e8ad0
--- /dev/null
+++ b/src/Modal.js
@@ -0,0 +1,26 @@
+// taken from React docs
+import React from "react";
+import { createPortal } from "react-dom";
+
+const modalRoot = document.getElementById("modal");
+
+class Modal extends React.Component {
+ constructor(props) {
+ super(props);
+ this.el = document.createElement("div");
+ }
+
+ componentDidMount() {
+ modalRoot.appendChild(this.el);
+ }
+
+ componentWillUnmount() {
+ modalRoot.removeChild(this.el);
+ }
+
+ render() {
+ return createPortal(this.props.children, this.el);
+ }
+}
+
+export default Modal;
diff --git a/src/index.html b/src/index.html
index 54324e73..17a6ae22 100644
--- a/src/index.html
+++ b/src/index.html
@@ -10,6 +10,7 @@
+
not rendered