text: import React, { useState } from "react";
  import { useMutation } from "@apollo/client";
  import { CREATE_BOOK } from "../queries";
  
  const NewBook = ({ show }) => {
    const [title, setTitle] = useState("");
    const [author, setAuhtor] = useState("");
    const [published, setPublished] = useState("");
    const [genre, setGenre] = useState("");
    const [genres, setGenres] = useState([]);
  
    const [createBook] = useMutation(CREATE_BOOK, {
      onError: (error) => {
        console.log(error);
      }
    });
  
    if (!show) {
      return null;
    }
  
    const submit = async (event) => {
      event.preventDefault();
  
      await createBook({
        variables: { title, author: author.toString(), published, genres },
      });
  
      setTitle("");
      setPublished("");
      setAuhtor("");
      setGenres([]);
      setGenre("");
      // window.location.reload();
    };
  
    const addGenre = () => {
      setGenres(genres.concat(genre));
      setGenre("");
    };
  
    return (
      <div>
        <form onSubmit={submit}>
          <div>
            title
            <input
              value={title}
              onChange={({ target }) => setTitle(target.value)}
            />
          </div>
          <div>
            author
            <input
              value={author}
              onChange={({ target }) => setAuhtor(target.value)}
            />
          </div>
          <div>
            published
            <input
              type="number"
              value={published}
              onChange={({ target }) => setPublished(Number(target.value))}
            />
          </div>
          <div>
            <input
              value={genre}
              onChange={({ target }) => setGenre(target.value)}
            />
            <button onClick={addGenre} type="button">
              add genre
            </button>
          </div>
          <div>genres: {genres.join(" ")}</div>
          <button type="submit">create book</button>
        </form>
      </div>
    );
  };
  
  export default NewBook;
  