DEV Community: Em Whitney

Elements of Performance

Em Whitney — Tue, 26 Jul 2022 16:58:00 +0000

These notes are sourced from Web Performance Fundamentals on Front End Masters by Todd Gardner

Understanding Performance

Why is performance important?

The main two reasons are:

As of 2021, Google ranks you on performance. Performance can make a big difference in whether people see your site on Google search results.
Angry and frustrated users don't stick around long.

In the real world, a faster load time can increase revenue and conversion rates.

What does fast mean?

Websites that feel fast have ads as an afterthought. All the content you want is all there, but later, come the ads. When ads load first, it's distracting and slows down the content of the page.

Know the psychology of users:

People want to start
Bored waits feel slower
Anxious waits feel slower
Unexplained waits feel slower (Why am I waiting?)
Uncertain waits feel slower (How long is this going to take?)
People will wait for value

Measuring Web Vitals/Performance

The old way: page load, how long from the time you clicked until the page loaded
The new way: web vitals

FCP: first contentful paint
LCP: largest contentful paint
CLS: cumulative layout shift
FID: first input delay

Google's web master tools measure these values and if you cross over their threshold they'll say they'll reduce your rank if you don't fix the issue

FCP: Respond quickly

Time from when the user clicks the link and the first meaningful bit of content enters the page.

100ms means good performance
300ms means poor performance

LCP: get to the point

The time at which the largest percentage of the screen has been rendered gets the LCP. A proxy for when the user thinks the page is almost ready, and most of the page is there.

2.5s means good performance
4.0s means poor performance

CLS: don't move stuff

All the times shifts (pushing the page down as loads come in) happen as the page loads.

.1 means good performance
.25 means poor performance

First Input Delay: don't load too much

Browser time delay between the user's first click and execution of application code.

Lighthouse: Measuring your performance in Chrome

Lighthouse is a top level tab in dev tools. Lighthouse generates a performance report. Make sure you clear storage and leave throttling on (simulate what a user sees versus what a developer sees).

Generate report to reload Chrome in the background and produce a performance report. It'll show all the above metrics and a couple more.

FYI:

Chrome Lighthouse reports are relative to what a user sees
Shows the performance relative to the Chrome window size so make sure to detatch
Chrome application priority (make sure Chrome stays in the foreground)

TailwindCSS Basics

Em Whitney — Mon, 11 Jul 2022 16:41:12 +0000

These notes were taken while watching the Front End Masters course "Intermediate React, v4" by Brian Holt.

What is Tailwind and why use it?

With Tailwind, you write no CSS. Instead, you use small utility classes to style your app.

All of your CSS lives in your components and classes. This allows you to develop quickly.

Tailwind is popular in the industry right now, especially with React developers.

Installing and setting up Tailwind

Install with npm:
npm i -D tailwindcss@3.0.22 postcss@8.4.6 autoprefixer@10.4.2

Creating Tailwind configuration document:
npx tailwindcss init

Modifying configuration document:

module.exports = {
  mode: "jit",
  content: ["./src/*.{html,js}"],
  theme: {
    extend: {},
  },
  variant: (),
  plugins: [],
}

This is a basic starting config file

Setting up style.css

@tailwind base;
@tailwind components;
@tailwind utilities;

This is how we include all the things we need from Tailwind. This is what allows Tailwind to bootstrap and only include the CSS you need to make your app run.

Basics and gradients

There's a VSCode extension called Tailwind CSS IntelliSense.

Make a new file in root directory:
.postcssrc

And then configure:

{
  "plugins": {
    "autoprefixer": {},
    "tailwindcss": {}
  }
}

Basics

// the div right inside <ThemeContext.Provider>
<div
  className="p-0 m-0"
  style={{
    background: "url(http://pets-images.dev-apis.com/pets/wallpaperA.jpg)",
  }}
>
  […]
</div>

The p-0 and m-0 is what Tailwind is a lot of: putting a lot of tiny utility classes on HTML elements. In this case: we're making it so the encapsulating div has zero padding and zero margin. If we wanted it to have a little of either, it'd m-1 or p-1. There's *-1 through 12 and then there it's more a random increase with 12, 14, 16, 20, 24, 28, 32, 36, 40, etc. all the way up to 96. There's also -m-1 for negative margins. There's also mt, ml, mr, mb for top, left, right, bottom and mx for left and right and my for top and bottom (these all apply to p as well.)

Gradients

<header className="w-full mb-10 text-center p-7 bg-gradient-to-b from-purple-400 via-pink-500 to-red-500">
  <Link className="text-6xl text-white hover:text-gray-200" to="/">
    Adopt Me!
  </Link>
</header>

Like p and m, we have w and h. w-1 would have a tiny width. w-full is width: 100%.
bg-gradient-to-b from-purple-400 via-pink-500 to-red-500 is a gradient just using classes. bg-gradient-to-b says it goes from the top to bottom (you can do -to-l, -to-r, or -to-t as well.) The from is the start. The via is a middle stop, and the to is the end.
The purple-400 is a purple color and the 400 is the lightness of it. 50 is nearly white, 900 is as dark as the color gets.
You can set your own colors via the theme but the default ones are really good.
text-6xl is a really big text size. They use the sizes sm, md, lg, xl, 2xl, etc. up to 9xl.
text-center will do text-align: center.
hover: is how we do hover, focus, disabled, etc. It takes whatever is on the right and only applies it only when that state is true. (note: disabled doesn't work without some magic in our PostCSS 7 compat layer. We'll do that in a bit.)
Note: from react-router-dom will pass styles and classes down to the resulting for you.

CSS Libraries

Emotion and Styled Components are better if you need your JavaScript to managing your CSS a lot (computation of color and hue and saturation computation and things like that). You can then use React to manipulate it.

You use bootstrap when you need something to look nice but you want to be quick about it.

Layout Basics

<div className="my-0 mx-auto w-11/12">
  <form
    className="p-10 mb-10 rounded-lg bg-gray-200 shadow-lg flex flex-col justify-center items-center"
    onSubmit={(e) => {
      e.preventDefault();
      requestPets();
    }}
  >
    […]
  </form>
</div>

rounded-lg is a "large" rounding of the corners i.e. border-radius.
shadow-lg is a "large" border shadow.
flex makes the display mode flex. flex-col makes it columns. justify-center makes it justify-content center. items-center makes it align-items: center. Net result is that you have centered horizontally and vertically items in a vertical direction.

Tailwind Plugins

Run npm install -D @tailwindcss/forms@0.4.0.

Put this into your tailwind.config.js

// replace plugins
plugins: [require("@tailwindcss/forms")],

This will apply a bunch of default styles for all of our basic form elements. Tailwind has a pretty great plugin ecosystem. One of my favorites is the aspect-ratio one. CSS doesn't currently have a backwards compatible way of doing aspect ratios (e.g. keep this image in a square ratio) and this plugin makes a primitive that you can use like that.

With this plugin they (probably wisely) require you to add type="text" to the the input so they can have a good selector for it.

Let's finish making SearchParams looks nice.

To each of the selects and inputs, add className="w-60 mb-5 block" so they have a nice uniform look.

To the breed selector, we want it to be grayed out when it's not available to use.

Now add className="w-60 mb-5 block disabled:opacity-50" to the breed .

Replace the button with:

<button
  className="rounded px-6 py-2 color text-white hover:opacity-50 border-none"
  style={{ backgroundColor: theme }}
>
  Submit
</button>

Grid & Breakpoints

// replace outermost div
<div className="grid gap-4 grid-cols-2">[…]</div>

grid puts you into display: grid.
gap-4 gives you the gutters between with the number representing how big.
grid-cols-2 says how many you want per row.

Making it responsive
<div className="grid gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">[…]</div>

The sm: is the small breakpoint which is larger than 640px apply this style (these can be adjusted and renamed)
The lg: is the large breakpoint is larger than 1024px. There's also md, xl, and 2xl too.

Positioning

<Link to={`/details/${id}`} className="relative block">
  <div>
    <img src={hero} alt={name} />
  </div>
  <div className="absolute bottom-0 left-0 bg-gradient-to-tr from-white to-transparent pr-2 pt-2">
    <h1>{name}</h1>
    <h2>{`${animal} — ${breed} — ${location}`}</h2>
  </div>
</Link>

We need to set the containing anchor link as both display block and relative positioning so we can reposition inside of it.
The absolute will make the name tag be absolutely positioned within the relatively positioned parent anchor link.
bottom-0 and left-0 will put our little name tag in the bottom left of the div.
The bg-gradient-to-tr from-white to-transparent gives us a fun little white-to-transparent gradient so it makes it easier to read the name tag.
pr-2 pt-2 is a little right and top padding to extend the gradient.

All the React Hooks

Em Whitney — Wed, 06 Jul 2022 16:43:36 +0000

During my foundational time, I write notes on what I studied and learned.

These notes were taken while watching the Front End Masters course "Intermediate React, v4" by Brian Holt.

Most common hooks

useState

The useState hook allows us to manage state with functions rather than class components. When state is stored in a hook, the component is loaded on every render and the component always has the latest state.

Example

Used when switching a component between green and not green

const[isGreen, setIsGreen] = useState(true);

onClick={()=> setIsGreen(!isGreen)}

Note: when putting something in the default state, it's preferable that it's something already computed or cheap (true, false, 0, [] etc) rather than a div element, for example. This is a performance consideration since it's not a cheap procedure to create and destroy things like DOM nodes.

useEffect

useEffect recreates the componentDidMount, componentDidUpdate, and componentDidUnmount functionality from React. This hook is useful for updates like AJAX requests or third-party library integrations occurring outside the render method.

If you add an empty array as a dependency, useEffect only runs once.

Example

In this example, the browser displays a timer that updates every second. The page re-renders every second when setTime is changed.

If you put time in the dependency array, useEffect will run every time the time variable is updated. It's better to be explicit with your dependencies, which is why we're adding time here.

useEffect(() => {
  const timer = setTimeout(() => setTime(new Date()), 1000);
  return () => clearTimeout(timer);
}, [time]);

On clearTimeout

clearTimeout takes in whatever the result of setTimeout is it'll prevent the timer you scheduled from running. You do this to clear out the component so you're not calling setTimeout when the component is out of scope (if the component gets unmounted).

useContext

Allows data from one component to be available in a subcomponent. This avoids the need to drop drill or pass the data from parent to child. Typically the data used with useContext is application-level state or data that's shared through the entire application.

Users are an example since you need to read and write user accounts from every part of the application.

Example

Passing in userState at the top level and reading it down to a child five levels down. At level five, you use useContext to pull out the original userState hook as user.

<UserContext.Provider value={userState}>
  <h1>first level</h1>
  <LevelTwo userState={userState} />
</UserContext.Provider>;

const LevelFive = () => {
  const [user, setUser] = useContext(userContext);
};

Note: use circumventing the normal data flow of React sparingly because it's not as explicit as prop-drilling. It's difficult to debug.

useRef

The useRef hook will always return the current value of the object because it is not subject to the closure's scope like useState.

Example

import { useState, useRef } from "react";

const RefComponent = () => {
  const [stateNumber, setStateNumber] = useState(0);
  const numRef = useRef(0);

  function incrementAndDelayLogging() {
    setStateNumber(stateNumber + 1);
    numRef.current++;
    setTimeout(
      () => alert(`state: ${stateNumber} | ref: ${numRef.current}`),
      1000
    );
  }

  return (
    <div>
      <h1>useRef Example</h1>
      <button onClick={incrementAndDelayLogging}>delay logging</button>
      <h4>state: {stateNumber}</h4>
      <h4>ref: {numRef.current}</h4>
    </div>
  );
};

export default RefComponent;

Why is this useful? It can be useful for things like holding on to setInterval and setTimeout IDs so they can be cleared later. Or any bit of statefulness that could change but you don't want it to cause a re-render when it does.

It's also useful for referencing DOM nodes directly and we'll see that a bit later in this section.

useReducer

A reducer is passed the state and an action. Based on the action's type, a new state is returned. The useReducer hook uses a dispatcher to call the reducer.

This is a preferable approach if you have complex state updates or if you have a situation like this: all of the state updates are very similar so it makes sense to contain all of them in one function.

Example

import { useReducer } from "react";

// fancy logic to make sure the number is between 0 and 255
const limitRGB = (num) => (num < 0 ? 0 : num > 255 ? 255 : num);

const step = 50;

const reducer = (state, action) => {
  switch (action.type) {
    case "INCREMENT_R":
      return Object.assign({}, state, { r: limitRGB(state.r + step) });
    case "DECREMENT_R":
      return Object.assign({}, state, { r: limitRGB(state.r - step) });
    case "INCREMENT_G":
      return Object.assign({}, state, { g: limitRGB(state.g + step) });
    case "DECREMENT_G":
      return Object.assign({}, state, { g: limitRGB(state.g - step) });
    case "INCREMENT_B":
      return Object.assign({}, state, { b: limitRGB(state.b + step) });
    case "DECREMENT_B":
      return Object.assign({}, state, { b: limitRGB(state.b - step) });
    default:
      return state;
  }
};

const ReducerComponent = () => {
  const [{ r, g, b }, dispatch] = useReducer(reducer, { r: 0, g: 0, b: 0 });

  return (
    <div>
      <h1 style={{ color: `rgb(${r}, ${g}, ${b})` }}>useReducer Example</h1>
      <div>
        <span>r</span>
        <button onClick={() => dispatch({ type: "INCREMENT_R" })}>➕</button>
        <button onClick={() => dispatch({ type: "DECREMENT_R" })}>➖</button>
      </div>
      <div>
        <span>g</span>
        <button onClick={() => dispatch({ type: "INCREMENT_G" })}>➕</button>
        <button onClick={() => dispatch({ type: "DECREMENT_G" })}>➖</button>
      </div>
      <div>
        <span>b</span>
        <button onClick={() => dispatch({ type: "INCREMENT_B" })}>➕</button>
        <button onClick={() => dispatch({ type: "DECREMENT_B" })}>➖</button>
      </div>
    </div>
  );
};

export default ReducerComponent;

Hooks you're unlikely to use

useMemo

Memoizes expensive function calls so they are only re-evaluated when needed.

useMemo and useCallback are performance optimizations. Use them only when you already have a performance problem instead of preemptively.

useMemo memoizes expensive function calls so they only are re-evaluated when needed. Brian uses the [fibonacci sequence][fibonacci] in its recursive style to simulate this. All you need to know is that once you're calling fibonacci with 30+ it gets quite computationally expensive and not something you want to do unnecessarily as it will cause pauses. It will now only call fibonacci if count changes and will just the previous, memoized answer if it hasn't changed, instead of calling it again on every re-render.

If we didn't have the useMemo call, every time I clicked on the title to cause the color to change from red to green or vice versa it'd unnecessarily recalculate the answer of fibonacci but because we did use useMemo it will only calculate it when num has changed.

Example

import { useState, useMemo } from "react";

const fibonacci = (n) => {
  if (n <= 1) {
    return 1;
  }

  return fibonacci(n - 1) + fibonacci(n - 2);
};

const MemoComponent = () => {
  const [num, setNum] = useState(1);
  const [isGreen, setIsGreen] = useState(true);
  const fib = useMemo(() => fibonacci(num), [num]);

  return (
    <div>
      <h1
        onClick={() => setIsGreen(!isGreen)}
        style={{ color: isGreen ? "limegreen" : "crimson" }}
      >
        useMemo Example
      </h1>
      <h2>
        Fibonacci of {num} is {fib}
      </h2>
      <button onClick={() => setNum(num + 1)}>➕</button>
    </div>
  );
};

export default MemoComponent;

useCallback

useCallback is similar to useMemo because it will limit calls to expensive functions as long as the props have not changed.

With useMemo, an expensive function could be called when a component is re-rendered because the function is redeclared. The useCallback hook solves this issue by ensuring the same function is always reference and only called when a re-render is necessary.

Typically whenever React detects a change higher-up in an app, it re-renders everything underneath it. This normally isn't a big deal because React is quite fast at normal things. However you can run into performance issues sometimes where some components are bad to re-render without reason.

In this case, Brian is using a new feature of React called React.memo. This is similar to PureComponent where a component will do a simple check on its props to see if they've changed and if not it will not re-render this component (or its children, which can bite you.) React.memo provides this functionality for function components.

Given that, we need to make sure that the function itself given to ExpensiveComputationComponent is the same function every time. We can use useCallback to make sure that React is handing the same fibonacci to ExpensiveComputationComponent every time so it passes its React.memo check every single time. Now it's only if count changes will it actually re-render (as evidenced by the time.)

Example

import { useState, useEffect, useCallback, memo } from "react";

const ExpensiveComputationComponent = memo(({ compute, count }) => {
  return (
    <div>
      <h1>computed: {compute(count)}</h1>
      <h4>last re-render {new Date().toLocaleTimeString()}</h4>
    </div>
  );
});

const CallbackComponent = () => {
  const [time, setTime] = useState(new Date());
  const [count, setCount] = useState(1);
  useEffect(() => {
    const timer = setTimeout(() => setTime(new Date()), 1000);
    return () => clearTimeout(timer);
  });

  const fibonacci = (n) => {
    if (n <= 1) {
      return 1;
    }

    return fibonacci(n - 1) + fibonacci(n - 2);
  };

  return (
    <div>
      <h1>useCallback Example {time.toLocaleTimeString()}</h1>
      <button onClick={() => setCount(count + 1)}>
        current count: {count}
      </button>
      <ExpensiveComputationComponent
        compute={useCallback(fibonacci, [])}
        count={count}
      />
    </div>
  );
};

export default CallbackComponent;

useLayoutEffect

useLayoutEffect is almost the same as useEffect except that it's synchronous to render as opposed to scheduled like useEffect is. If you're migrating from a class component to a hooks-using function component, this can be helpful too because useLayout runs at the same time as componentDidMount and componentDidUpdate whereas useEffect is scheduled after. This should be a temporary fix.

The only time you should be using useLayoutEffect is to measure DOM nodes for things like animations. In the example, I measure the textarea after every time you click on it (the onClick is to force a re-render.) This means you're running render twice but it's also necessary to be able to capture the correct measurements.

Example

import { useState, useLayoutEffect, useRef } from "react";

const LayoutEffectComponent = () => {
  const [width, setWidth] = useState(0);
  const [height, setHeight] = useState(0);
  const el = useRef();

  useLayoutEffect(() => {
    setWidth(el.current.clientWidth);
    setHeight(el.current.clientHeight);
  });

  return (
    <div>
      <h1>useLayoutEffect Example</h1>
      <h2>textarea width: {width}px</h2>
      <h2>textarea height: {height}px</h2>
      <textarea
        onClick={() => {
          setWidth(0);
        }}
        ref={el}
      />
    </div>
  );
};

export default LayoutEffectComponent;

useImperativeHandle

Here's one you will likely never directly use but you may use libraries that use it for you. Brian uses it in conjunction with another feature called forwardRef that again, you probably won't use but libraries will use on your behalf.

In the example above, whenever you have an invalid form, it will immediately focus the the first field that's invalid. If you look at the code, ElaborateInput is a child element so the parent component shouldn't have any access to the input contained inside the component. Those components are black boxes to their parents. All they can do is pass in props. So how do we accomplish it then?

The first thing we use is useImperativeHandle. This allows us to customize methods on an object that is made available to the parents via the useRef API.

Inside ElaborateInput we have two refs: one thate is the one that will be provided by the parent, forwarded through by wrapping the ElaborateInput component in a forwardRef call which will ten provide that second ref parameter in the function call, and then the inputRef which is being used to directly access the DOM so we can call focus on the DOM node directly.

From the parent, we assign via useRef a ref to each of the ElaborateInputs which is then forwarded on each on via the forwardRef. Now, on these refs inside the parent component we have those methods that we made inside the child so we can call them when we need to. In this case, we'll calling the focus when the parent knows that the child has an error.

Again, you probably use this directly but it's good to know it exists. Normally it's better to not use this hook and try to accomplish the same thing via props but sometimes it may be useful.

Example

import { useState, useRef, useImperativeHandle, forwardRef } from "react";

const ElaborateInput = forwardRef(
  ({ hasError, placeholder, value, update }, ref) => {
    const inputRef = useRef();
    useImperativeHandle(ref, () => {
      return {
        focus() {
          inputRef.current.focus();
        }
      };
    });
    return (
      <input
        ref={inputRef}
        value={value}
        onChange={(e) => update(e.target.value)}
        placeholder={placeholder}
        style={{
          padding: "5px 15px",
          borderWidth: "3px",
          borderStyle: "solid",
          borderColor: hasError ? "crimson" : "#999",
          borderRadius: "5px",
          margin: "0 10px",
          textAlign: "center"
        }}
      />
    );
  }
);

const ImperativeHandleComponent = () => {
  const [city, setCity] = useState("Seattle");
  const [state, setState] = useState("WA");
  const [error, setError] = useState("");
  const cityEl = useRef();
  const stateEl = useRef();

  function validate() {
    // lol I found it on StackOverflow : https://stackoverflow.com/a/25677072
    if (
      !/^([a-zA-Z\u0080-\u024F]+(?:. |-| |'))*[a-zA-Z\u0080-\u024F]+$/.test(
        city
      )
    ) {
      setError("city");
      cityEl.current.focus();
      return;
    }

    if (!/^[A-Z]{2}$/.test(state)) {
      setError("state");
      stateEl.current.focus();
      return;
    }

    setError("");
    alert("valid form!");
  }

  return (
    <div>
      <h1>useImperativeHandle Example</h1>
      <ElaborateInput
        hasError={error === "city"}
        placeholder={"City"}
        value={city}
        update={setCity}
        ref={cityEl}
      />
      <ElaborateInput
        hasError={error === "state"}
        placeholder={"State"}
        value={state}
        update={setState}
        ref={stateEl}
      />
      <button onClick={validate}>Validate Form</button>
    </div>
  );
};

export default ImperativeHandleComponent;

useDebugValue & useId

These hooks, like useImperativeHandle, are more built for library authors.

useDebugValue allows you to surface information from your custom hook into the dev tools. This allows the developer who is consuming your hook (possibly you, possibly your coworker) to have whatever debugging information you choose to surfaced to them. If you're doing a little custom hook for your app (like the breed one we did in the Intro course) this probably isn't necessary. However if you're consuming a library that has hooks (like how react-router-dom has hooks) these can be useful hints to developers.

Normally you'd just use the developer tools built into the browser but CodeSandbox has the dev tools built directly into it. Just know that normally you'd use the browser extension.

Example

import { useState, useEffect, useDebugValue } from "react";

const useIsRaining = () => {
  const [isRaining, setIsRaining] = useState(false);

  useEffect(() => {
    // pretend here you'd make an API request to a weather API
    // instead we're just going to fake it

    setIsRaining(Math.random() > 0.5);
  }, []);

  useDebugValue(isRaining ? "Is Raining" : "Is Not Raining");

  return isRaining;
};

const DebugValueComponent = () => {
  const isRaining = useIsRaining();

  return (
    <div>
      <h1>useDebugValue Example</h1>
      <h2>Do you need a coat today? {isRaining ? "yes" : "maybe"}</h2>
    </div>
  );
};

export default DebugValueComponent;

Portals & useRef in React

Em Whitney — Tue, 05 Jul 2022 17:37:48 +0000

During my foundational time, I'm going to write notes on what I studied and learned.

These notes were taken while watching the Front End Masters course "Complete Intro to React, v7" by Brian Holt.

What is a portal?

A portal is a mount point, separate from the actual DOM which the app is put into (root in index HTML), for the React app.

A common use case for this is a modal (a child window that pops up).

Adding the portal

First, add the modal into index.html with a separate mount point

<!-- above #root -->
<div id="modal"></div>

Make a new file called Modal.js

import React, { useEffect, useRef } from "react";
import { createPortal } from "react-dom";

const Modal = ({ children }) => {
  const elRef = useRef(null);
  if (!elRef.current) {
    elRef.current = document.createElement("div");
  }

  useEffect(() => {
    const modalRoot = document.getElementById("modal");
    modalRoot.appendChild(elRef.current);
    return () => modalRoot.removeChild(elRef.current);
  }, []);

  return createPortal(<div>{children}</div>, elRef.current);
};

export default Modal;

The div container is what renders inside of the Portal.

Need to render to the portal spot on the DOM.

Need to remove the div afterwards. You do this by returning a function. This function will get invoked when the Modal goes away.

What is a ref?

You use ref when you want to refer to the same thing across all things rendering.

It is essentially a pointer to an object with a current property, and when you update the ref, you update the current property.

It will never cause your component to re-render because it is completely separate from the component render cycle, unlike state variables.

Adding code for modal toggle

// at the top
import Modal from "./Modal";

// add showModal
state = { loading: true, showModal: false };

// above render
toggleModal = () => this.setState({ showModal: !this.state.showModal });

// add showModal
const { animal, breed, city, state, description, name, images, showModal } =
  this.state;

// add onClick to <button>
<button onClick={this.toggleModal} style={{ backgroundColor: theme }}>
  Adopt {name}
</button>;

// below description
{
  showModal ? (
    <Modal>
      <div>
        <h1>Would you like to adopt {name}?</h1>
        <div className="buttons">
          <a href="https://bit.ly/pet-adopt">Yes</a>
          <button onClick={this.toggleModal}>No</button>
        </div>
      </div>
    </Modal>
  ) : null;
}