Question 1

index.html

<div id="root"></div>

question-1.markdown

Question 1

More function; less Class.

The sometimes used to be called "stateless", but thanks to hooks, that's not really accurate anymore.

A Pen by Alex Reynish on CodePen.

License.

script.babel

import React, { useState } from "https://cdn.skypack.dev/[email protected]";
import ReactDOM from "https://cdn.skypack.dev/[email protected]";

/* 
*   Modify the component to query the api as the user types.
*   Display the results as `${title} - ${author}`
*   `https://gutendex.com/books/?search=${query}`
*/

const App = () => {
  const [query, setQuery] = useState("")
  return(
    <div className="box">
      <label for="query">Search</label>
      <input id="query" type="text" value={query} onChange={e => setQuery(e.target.value)} />
    </div>
  );
}

ReactDOM.render(<App />,
document.getElementById("root"))

scripts

<script src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>

style.scss

body {
  height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
}
.box {
  width: 300px;
  h1 {
    font-size: 20px;
    margin: 0 0 1rem 0;
  }
}

label {
  margin-right: .8rem;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css" rel="stylesheet" />