title: fetching item with specific id from database using axios.get
body: <p>Hello can anyone please help me identify what is the error here:
  I keep getting this error in the console:</p>
  <p>xhr.js:178 GET http://localhost:3000/update/5f6b4ae1d9cde357c8500069 404 (Not Found)</p>
  <pre><code>import React, { useState, useContext, useEffect } from &quot;react&quot;;
  import UserContext from &quot;../../context/UserContext&quot;;
  import Axios from &quot;axios&quot;;
  import ErrorNotice from &quot;../misc/ErrorNotice&quot;;
  
  export default function UpdateEvent(props) {
    const { userData } = useContext(UserContext);
    const [title, setTitle] = useState();
  
  
  
    useEffect(() =&gt; {
      const token = localStorage.getItem(&quot;auth-token&quot;);
      Axios.get(`http://localhost:3000/update/${props.match.params.id}`, {
          headers: { &quot;x-auth-token&quot;: token },
      })
      .then(res=&gt; [
          setTitle(res.data.title)
      ])
      .catch(error=&gt;console.log(error))
    }, []);
  
    return (
      &lt;div className=&quot;page&quot;&gt;
          &lt;h2&gt;{title}&lt;/h2&gt;
      &lt;/div&gt;
    );
  }
  
  </code></pre>
  <p>This is how I call my the update component from my homepage:</p>
  <pre><code>            &lt;button
                className=&quot;btn btn-outline-success&quot;
                onClick={() =&gt; updateEvent(event._id)}
              &gt;
                Update
              &lt;/button&gt;{&quot; &quot;}
            &lt;/td&gt;
            &lt;td&gt;
              &lt;button
                onClick={deleteEvent(event._id)}
                className=&quot;btn btn-outline-warning&quot;
              &gt;
                Delete
              &lt;/button&gt;
            &lt;/td&gt;
          &lt;/tr&gt;
        );
      });
    }
  
  
    const updateEvent = (id) =&gt; history.push(`/update/${id}`);
  
  </code></pre>
  <p>I have added the following routes to my App.js file:</p>
  <pre><code>            &lt;Switch&gt;
                &lt;Route exact path=&quot;/&quot; component={Home} /&gt;
                &lt;Route path=&quot;/login&quot; component={Login} /&gt;
                &lt;Route path=&quot;/register&quot; component={Register} /&gt;
                &lt;Route path=&quot;/new&quot; component={AddEvent} /&gt;
                &lt;Route path=&quot;/update/:id&quot; component={UpdateEvent} /&gt;
              &lt;/Switch&gt;
  
  </code></pre>
  <p>And my backend for update looks like this:</p>
  <pre><code>//update an event BACKEND
  router.put(&quot;update/:id&quot;, auth, async (req, res) =&gt; {
    const event = await Event.findOne({ userId: req.user, _id: req.params.id });
    if (!event)
      return res.status(400).json({
        msg: &quot;No event found with this ID that belongs to the current user.&quot;,
      });
    const updatedEvent = await Event.findOneAndUpdate(
      { _id: req.params.id },
      req.body
    );
    res.send({ message: &quot;Event updated.&quot; });
  });
  
  </code></pre>