Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Emma Groves
Emma Groves
716 Points
Posted by Emma Groves
Emma Groves
716 Points

React: I only want the API to fire on click or Submit not onChange, help please?

Currently the API is being triggered every time a letter is typed into the input box, which is causing far too many API call, I really only want it to change once the user has clicked the button("input").

APP.JS

import React, { Component } from "react";
import "./App.css";
import Header from "./components/Header";
import NavBar from "./components/NavBar";
import AddBookForm from "./components/AddBookForm";
import BookCard from "./components/BookCard";

class App extends Component {
  state = {
    books: [],
    selectedBook: []
  };

  onClick = e => {
    console.log("event", e);
    fetch(`https://www.googleapis.com/books/v1/volumes?q=${e.target.value}`)
      .then(response => response.json())
      .then(data => this.setState({ books: data.items[0].volumeInfo }))
      .catch(error => error);
  };

  moveToSelectedBook = () => {
    this.setState(prevState => {
      return {
        selectedBook: [
          ...prevState.selectedBook,
          {
            selectedBook: prevState.books
          }
        ]
      };
    });
  };

  render() {
    console.log("hereeeeee", this.state.books);
    console.log(this.state.selectedBook);
    return (
      <div className="App">
        <Header />
        <NavBar />
        <AddBookForm
          onClick={this.onClick}
          moveToSelectedBook={this.moveToSelectedBook}
        />
        <div className="book-card-flex">
          {this.state.selectedBook.map(book => (
            <BookCard
              title={book.selectedBook.title}
              subTitle={book.selectedBook.subtitle}
              averageRating={book.selectedBook.averageRating}
              bookCover={book.selectedBook.imageLinks.thumbnail}
            />
          ))}
        </div>
      </div>
    );
  }
}

export default App;

ADDBOOKFORM

import React, { Component } from "react";

class AddBookForm extends Component {
  handleSubmit = e => {
    e.preventDefault();
  };

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input
          type="text"
          placeholder="Search for an author or book..."
          className="input"
          onChange={this.props.onClick}
        />
        <input
          type="submit"
          value="Add Book"
          onClick={this.props.moveToSelectedBook}
        />
      </form>
    );
  }
}

export default AddBookForm;

1 Answer

tomd
tomd
16,701 Points
tomd
tomd
16,701 Points

Your line of code here

<input
      type="text"
      placeholder="Search for an author or book..."
      className="input"
      onChange={this.props.onClick}
/>

The reason the api is being called every time a letter is typed is because you have assigned the onClick function to fire every time a user types.