title: Querying custom database(Mongodb)
body: <p>I am trying to create a search bar to query an api endpoint that searches my database for specific titles. I have tested my route on Postman and it works correctly however when I try to hit my api on my frontend it returns nothing. I have tried logging the response I get from my axios call however when I do so the page fails to compile and my response is declared as not defined(no-undef). Here are my files:</p>
  <p>Frontend file</p>
  <pre><code>import React, { useState, useEffect } from &quot;react&quot;;
  import axios from &quot;axios&quot;;
  import NavigationBar from &quot;../Components/HomeNav&quot;;
  import { Button } from &quot;react-bootstrap&quot;;
  
  const Search = () =&gt; {
    const [queryTitle, setQueryTitle] = useState({});
    const [queriedPosts, setQueriedPosts] = useState(null);
  
    const handleSearch = (event) =&gt; {
      event.preventDefault();
      setQueryTitle({ title: event.target.value });
      axios
        .get(&quot;/api/posts/search&quot;, queryTitle)
        .then((response) =&gt; setQueriedPosts(response.data), console.log(response))
        .catch((error) =&gt; console.log(error));
    };
  
    return (
      &lt;&gt;
        &lt;NavigationBar /&gt;
        {queriedPosts
          ? queriedPosts.map((post) =&gt; {
              return (
                &lt;&gt;
                  &lt;h1&gt;{post.title}&lt;/h1&gt;
                &lt;/&gt;
              );
            })
          : &quot;&quot;}
        &lt;Button onClick={() =&gt; console.log(&quot;title&quot;, queryTitle)}&gt;rest&lt;/Button&gt;
        &lt;Button onClick={() =&gt; console.log(&quot;posts&quot;, queriedPosts)}&gt;rest&lt;/Button&gt;
        &lt;h1&gt;Search&lt;/h1&gt;
        &lt;input
          id=&quot;title&quot;
          name=&quot;title&quot;
          type=&quot;text&quot;
          name=&quot;recipes&quot;
          onChange={handleSearch}
        /&gt;
      &lt;/&gt;
    );
  };
  
  export default Search;
  </code></pre>
  <p>Route file</p>
  <pre><code>const router = require(&quot;express&quot;).Router(),
  jwt = require('jsonwebtoken');
  let User = require(&quot;../db/models/User&quot;),
  Post = require('../db/models/Post');
  
  router.post(&quot;/api/users&quot;, async (req, res) =&gt; {
    const { name, email, password } = req.body;
    let user = await User.findOne({ email });
    if (user) {
      throw new Error(&quot;Use a different email!&quot;);
    }
    try {
      const newUser = new User({
        name,
        email,
        password,
      });
  
      const token = await newUser.generateAuthToken();
      res.cookie(&quot;jwt&quot;, token, {
        httpOnly: true,
        sameSite: &quot;Strict&quot;,
        secure: process.env.NODE_ENV !== &quot;production&quot; ? false : true,
      });
  
      res.status(201).json(&quot;User added&quot;);
    } catch (error) {
      res.status(400).json({ error: error.toString() });
    }
  });
  
  router.post(&quot;/api/users/login&quot;, async (req, res) =&gt; {
    const { email, password } = req.body;
    try {
  
      const user = await User.findByCredentials(email, password);
      const token = await user.generateAuthToken();
  
      res.cookie(&quot;jwt&quot;, token, {
        httpOnly: true,
        sameSite: &quot;strict&quot;,
        secure: process.env.NODE_ENV !== &quot;production&quot; ? false : true,
      });
      res.json(user);
    } catch (error) {
      res.status(400).json({ error: error.toString() });
    }
  });
  
  router.get(&quot;/api/posts/search&quot;, async (req, res) =&gt; {
    const { title } = req.body;
    try {
      const recipeTitle = await Post.find();
      const recipeQuery = recipeTitle.filter(post =&gt; {
        let recipeName = post.title;
        return recipeName.includes(title) || recipeName.toLowerCase().includes(title);
      })
      res.json(recipeQuery);
    } catch (error) {
      res.status(404).json({error: error.toString()})
    }
  })
  
  module.exports = router;
  </code></pre>
  <p>I am not exactly sure what is going on as I am expecting for my response to at the very least return an empty array or am I wrong to assume that? Also after entering a query string queriedPosts returns as an empty array and queryTitle returns as an Object {title: 'string'}.</p>
  <p>After fiddling with my backend route file I have discovered that when I comment out my filter method and return recipeTitle my web page will display all the titles of the all the posts in my database however this does not explain why Postman returns a correctly filtered response.</p>