reynish · June 30, 2022 10:12
diff --git a/index.html b/index.html
 <div id="root"></div>
diff --git a/question-1.markdown b/question-1.markdown
diff --git a/script.babel b/script.babel
 import React, { useState } from "https://cdn.skypack.dev/react@17.0.1";
 import ReactDOM from "https://cdn.skypack.dev/react-dom@17.0.1";

 /* 
 *   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"))
diff --git a/scripts b/scripts
 <script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.production.min.js"></script>
 <script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.production.min.js"></script>
diff --git a/style.scss b/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;
 }
diff --git a/styles b/styles
 <link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css" rel="stylesheet" />
	import React, { useState } from "https://cdn.skypack.dev/react@17.0.1";
	import ReactDOM from "https://cdn.skypack.dev/react-dom@17.0.1";

	/*
	* 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"))
	<script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.production.min.js"></script>
	<script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.production.min.js"></script>