title: MERN Delete request issues
body: <p>I'm wokring on a simple suggestion app it has authenctication and context api for State management, I can create, read, update and delete a suggestion but I've been trying to make a delete request but its not working.
  I console.log the error message due to the conditional statement and its saying
  <strong>Request failed with status code 403</strong>
  I've tried everything but its not working</p>
  <p>this is my code on expresss</p>
  <pre><code>router.delete(&quot;/bmi/delete/:id&quot;, async (req, res) =&gt; {
    const id = req.params.id;
    try {
      const suggest = await bmiCalc.findById(id);
      if (suggest.userId === req.body.userId) {
        await suggest.deleteOne();
        res.status(200).json(&quot;Suggestion deleted&quot;);
      } else {
        res.status(403).json(&quot;Not your Suggestion to delete&quot;);
      }
    } catch (error) {
      res.status(500).json(&quot;Error from server&quot;);
    }
  });
  
  </code></pre>
  <p>This is the react axios request</p>
  <pre><code>const Home = () =&gt; {
    const { user } = useContext(AuthContext);
    const [data, setData] = useState([]);
  const handleSuggestion = async (e) =&gt; {
      e.preventDefault();
  
      const fullDetail = {
        userId: user.users._id,
        bmiNumber: bmiNumber.current.value,
        country: country.current.value,
        messages: messages.current.value,
      };
      const res = await axios.post(
        &quot;http://localhost:5000/app/bmi/bmiform/create&quot;,
        fullDetail,
      );
      setData([...data, res.data]);
      console.log(res.data);
    };
  
    const reload = () =&gt; {
      window.location.reload();
    };
  
    useEffect(() =&gt; {
      const getSuggestion = async () =&gt; {
        const res = await axios.get(
          `http://localhost:5000/app/bmi/all/${user.users._id}`,
        );
        await setData(res.data);
      };
      getSuggestion();
    }, [user.users._id]);
  
    const handleDelete = async (id) =&gt; {
      try {
        await axios.delete(`http://localhost:5000/app/bmi/delete/${id}`, {
          data: { userId: user.users._id },
        });
  
        setData(data.filter((post) =&gt; post._id !== id));
      } catch (err) {
        console.log(err.message);
      }
    };
  </code></pre>
  <p>I'm using chakra UI, here is the button for the onclick event</p>
  <pre><code>
  &lt;Flex
          w={&quot;100%&quot;}
          h={&quot;60vh&quot;}
          padding={&quot;8px&quot;}
          gap={&quot;8px&quot;}
          flexWrap={&quot;wrap&quot;}
          justifyContent={&quot;flex-start&quot;}&gt;
          {data.map((data) =&gt; {
            return (
              &lt;Box
                key={data._id}
                width={[&quot;47%&quot;, &quot;55%&quot;, &quot;25%&quot;, &quot;24%&quot;]}
                height={[&quot;55%&quot;, &quot;50%&quot;, &quot;50%&quot;, &quot;50%&quot;]}
                bg={&quot;#ffffff&quot;}
                display={&quot;flex&quot;}
                flexDirection={&quot;column&quot;}
                borderRadius={7}
                gap={4}
                padding={5}&gt;
                &lt;Box w={&quot;100%&quot;} h={&quot;5vh&quot;} transition={&quot;0.3s all&quot;}&gt;
                  &lt;p className='boxTitle'&gt; BMI: {data.bmiNumber}&lt;/p&gt;
                  &lt;p className='boxCountry'&gt; {data.country}&lt;/p&gt;
                &lt;/Box&gt;
                &lt;Box width={&quot;100%&quot;} height={&quot;100%&quot;} paddingTop={2}&gt;
                  &lt;p className='boxMessage'&gt; {data.messages}&lt;/p&gt;
                &lt;/Box&gt;
                &lt;Flex width={&quot;100%&quot;} gap={1}&gt;
                  &lt;Button
                    bg={&quot;#541db5&quot;}
                    type='submit'
                    width='100%'
                    outline='none'
                    border='none'
                    borderRadius={6}
                    color='#ffffff'
                    fontSize={20}
                    fontWeight={600}
                    marginBottom={4}
                    padding={4}&gt;
                    edit
                  &lt;/Button&gt;
                  {data.userId === user?.users._id &amp;&amp; (
                    &lt;Button
                      onClick={() =&gt; handleDelete(data._id)}
                      type='submit'
                      width='100%'
                      outline='none'
                      border='none'
                      borderRadius={6}
                      color='#ffffff'
                      fontSize={20}
                      fontWeight={600}
                      bg='#ef233c'
                      marginBottom={4}
                      padding={4}&gt;
                      &lt;DeleteIcon /&gt;
                    &lt;/Button&gt;
                  )}
                &lt;/Flex&gt;
              &lt;/Box&gt;
            );
          })}
        &lt;/Flex&gt;
  </code></pre>