I'm having trouble updating state with response from Google Books API - reactjs

Question

GitHub Repo - With state branch
Hey everyone! I'm currently learning React, state management, and making API requests within react. I was able to fetch and receive a status of 200 based on my client-side application. I'm simply just trying to use the Google Books API to display search results based on filters, just to make sure I understand how an application like this would work.
I ran into trouble with a CORS error. To get around this error I just updated the request mode to no-cors. I think that might be part of my problem though because when I view the component tree using DevTools, the state is not updating with the newly received data and I'm getting an error message "Failed to fetch"' even though the network tab displays a 200 status code.
Any help on how to receive and display fetched data from a server when using state? Any help would be appreciated.
I've included a link to my repo as well as the following code snippets:
Parent Component - App.js
import React, { Component } from "react";
import "../Styles/App.css";
import SiteHeader from "./SiteHeader";
import Form from "./Form";
import BookList from "./BookList";
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
books: [],
searchInput: "",
printFilter: "",
bookFilter: "",
};
}
handleUpdateBooks(data) {
this.setState({
books: data,
});
}
render() {
return (
<div className="App">
<SiteHeader />
<Form updateBooks={(data) => this.handleUpdateBooks(data)} />
<BookList books={this.state.books} />
</div>
);
}
}
Child Component - Form.js
import React, { Component } from "react";
import "../Styles/Form.css";
// UNABLE TO RECEIVE PROPER RESPONSE FROM API. RECEIVING 200 STATUS BUT STATE IS NOT BEING UPDATED WITH THE DATA OBJECT
export default class Form extends Component {
// add a constructor to initialize state for controlled form component
constructor(props) {
super(props);
this.state = {
search: "",
printType: "all",
bookType: "",
};
}
// write methods to update the state when each of the input values are changed
searchChanged(search) {
this.setState({
search,
});
}
printTypeChanged(printType) {
this.setState({
printType,
});
}
bookTypeChanged(bookType) {
this.setState({
bookType,
});
}
formatQueryParams(parameters) {
const queryItems = Object.keys(parameters).map(
(key) => `${key}=${parameters[key]}`
);
return queryItems.join("&");
}
handleSubmit(e) {
e.preventDefault();
// create object of search terms and filters
const BASE_URL = "https://www.googleapis.com/books/v1/volumes";
const parameters = (({ search, printType, bookType, key }) => ({
q: search,
printType,
filter: bookType,
key: "AIzaSyDcxqxraM3gEciVrsqWwQrpAlv5akq_dlk",
}))(this.state);
const queryString = this.formatQueryParams(parameters);
const FETCH_URL = BASE_URL + "?" + queryString;
console.log(FETCH_URL);
// write a method to format the query parameters into correct syntax
this.formatQueryParams(parameters);
fetch(FETCH_URL, {
mode: "no-cors",
})
.then((res) => {
if (!res.ok) {
console.log(res);
throw new Error("Something went wrong, please try again later");
}
return res;
})
.then((res) => res.json())
.then((data) => {
this.props.updateBooks(data);
})
.catch((err) => {
this.setState({
error: err.message,
});
});
}
render() {
return (
<div className="Form">
<form onSubmit={(e) => this.handleSubmit(e)}>
<div className="Form_search">
<label htmlFor="search">
<strong>Search: </strong>
</label>
<input
type="text"
placeholder="Enter book title"
name="search"
id="search"
value={this.state.search}
onChange={(e) => this.searchChanged(e.target.value)}
required
/>
<button type="submit">
<strong>Get Books!</strong>
</button>
</div>
<div className="Form_filters">
<div className="Form_print">
<label htmlFor="print-type">
<strong>Print Type: </strong>
</label>
<select
name="print-type"
id="print-type"
value={this.state.printType}
onChange={(e) => this.printTypeChanged(e.target.value)}
>
<option value="all" selected>
All
</option>
<option value="books">Books</option>
<option value="magazines">Magazines</option>
</select>
</div>
<div className="Form_book">
<label htmlFor="book-type">
<strong>Book Type: </strong>
</label>
<select
name="book-type"
id="book-type"
value={this.state.bookType}
onChange={(e) => this.bookTypeChanged(e.target.value)}
>
<option value="" selected>
No Filter
</option>
<option value="partial">Partial</option>
<option value="full">Full</option>
<option value="ebooks">eBooks</option>
<option value="free-ebooks">Free eBooks</option>
<option value="paid-ebooks">Paid eBooks</option>
</select>
</div>
</div>
</form>
</div>
);
}
}