title: React TypeError: x is not a function
body: <p>I call the function 'booksRefresh()' from the parent in the child component, but I get the error:</p>
  
  <blockquote>
    <p>TypeError: booksRefresh is not a function</p>
  </blockquote>
  
  <p>I don't know why, because 'booksRefresh' is a function. Can someone help me explain why this error occurs?</p>
  
  <p>Here is my code:</p>
  
  <pre><code>import React, {useState} from "react";
  import {Redirect} from "react-router";
  import {addBook} from "../api/api";
  import {Button} from "react-bootstrap";
  
  const AddBookForm = (booksRefresh) =&gt; {
      const [title, setTitle] = useState();
      const [description, setDescription] = useState();
      const [submitted, setSubmitted] = useState(false);
  
      const postRequestHandler = () =&gt; {
          addBook(title, description);
          booksRefresh();
      }
  ...
   return (
          ...
              &lt;Button type="submit" onClick={postRequestHandler} variant="outline-success"&gt;Add&lt;/Button&gt;
          &lt;/div&gt;
      )
  </code></pre>
  
  <p>Parent:</p>
  
  <pre><code>function App({history}) {
    ...
      const [changeInBooks, setChangeInBooks] = useState(0)
  
      const booksRefresh = () =&gt; {
          let incrementChangeInBook = changeInBooks + 1;
          setChangeInBooks(incrementChangeInBook)
      }
  return (
          &lt;div className="App"&gt;
              &lt;header className="App-header"&gt;
                  ...
                              &lt;Button variant="outline-success" onClick={() =&gt; history.push("/new-book")}&gt;
                                  {ADD_BOOK}&lt;/Button&gt;
                  ...
              &lt;/header&gt;
              &lt;Switch&gt;
                  ...
                  &lt;Route path="/new-book" exact render={() =&gt;
                      &lt;AddBookForm
                          booksRefresh={booksRefresh}/&gt;
                  }/&gt;
                 ...
              &lt;/Switch&gt;
          &lt;/div&gt;
      );
  }
  
  export default withRouter(App);
  </code></pre>