Error: Request Failed with status code 400 – React – API Key

this is my code:

import "./styles.css";
import "mvp.css";
import { useState, useEffect } from "react";
import axios from "axios";

function Books() {
  const [book, setBook] = useState("");
  const [result, setResult] = useState([]);
  const [apiKey, setApiKey] = useState(
    ""
  );
  function handleChange(event) {
    const book = event.target.value;

    setBook(book);
  }

  function handleSubmit(event) {
    event.preventDefault();

    axios
      .get(
        "https://www.googleapis.com/books/v1/volumes?q=" +
          book +
          "&key=" +
          apiKey +
          "&maxResults=100"
      )
      .then((data) => {
        console.log(data);
      });
  }

  return (
    <div className="App">
      <h1>Search For A Book</h1>
      <form onSubmit={handleSubmit}>
        <div className="form-group">
          <input
            type="text"
            onChange={handleChange}
            className="input"
            placeholder="Search..."
          />
          <button type="submit" className="btn">
            Go!
          </button>
        </div>
      </form>
    </div>
  );
}

export default function App() {
  return <Books />;
}

Is anyone able to figure out why I am unable to get this to work? I keep getting a Request failed error and I am not sure what is going wrong. I have manually entered my url into the my browser such as this:

https://www.googleapis.com/books/v1/volumes?q=javascript&key=APIKEY

But when I do it through my code it is not working.

Thanks in advance.

Answer

maxResults should be less than <= 40 according to recommendation. Update the max result in code. It would work after that