title: React state not updating as expected, values in body not recognized by backend
body: <p>I have a component that is conditionally setting values based on a piece of state and a button click that passes the data object to RTK Query and sends to a controller. There are two aspects that are confusing me. First, the console log shows that the values getting set into state are the opposite of what they should be, and 2nd, the mongoose/express controller is not responding according to the values being passed in the req.body and just continues to provide the already existing values.</p>
  <p>The button is the user way of toggle a submission or unsubmit, if submission is already true button correctly displays to unsubmit and onClick should set the values to false and 2 empty strings, but is providing the opposite. If submission is false, then the button is correctly displaying to submit, and the onClick should set the values to true and fill the strings, but is providing the opposite.</p>
  <p>React component:</p>
  <pre><code>const Submit = ({ planId, plan, user, today}) =&gt; {
  
     const [isSubmitted, setIsSubmitted] = useState(plan.submitted);
     const [submitBy, setSubmitBy] = useState(plan.submittedBy);
     const [submitDate, setSubmitDate] = useState(plan.submittedDate);
     const [skip, setSkip] = useState(true)
     const [userId, setUserId] = useState()
  
      const [updateStatus] = useUpdateReportStatusMutation()
  
      const {data} = useGetUserQuery(userId, {skip})
  
      useEffect(() =&gt; {
          if(isSubmitted) {
                setUserId(plan.submittedBy),
                setSkip(false)
            }
  
      }, [isSubmitted])
     
       
       const onSubmit= async (data) =&gt; {
          console.log('onSubmit: ', data) //This shows the data as reflected by the onClick functions
                       
        try {
          const payload =  await updateStatus({ planId, data }).unwrap();
            console.log('fulfilled', payload) //continues to show the same already existing data
          } catch (err) {
            console.error('Failed to update report status: ', err)
          }
      
          toast.success(&quot;Report Status Updated&quot;, {
            position: toast.POSITION.TOP_RIGHT
          });
          
       }
      
      
  
      const handleUnsubmitValues = () =&gt; {
  
          setIsSubmitted(false)
          setSubmitBy('')
          setSubmitDate( '')
          console.log(&quot;values for unsubmit: &quot;, isSubmitted, submitBy, submitDate) //this is currently logging- isSubmitted: true, submitBy: 'the users ID', submitDate: 'an ISO date string'
  
  
          handleSubmit()
          
      }
  
      const handleSubmitValues = () =&gt; {
          setIsSubmitted(true)
          setSubmitBy(user)
          setSubmitDate(today)
          console.log(&quot;values for submit&quot;, isSubmitted, submitBy, submitDate) //this is logging- isSubmitted: false, submitBy: '', submitDate: ''
  
          handleSubmit()
          
       }
  
       const handleSubmit = () =&gt; {
          const data = {
              submitted: isSubmitted,
              submittedBy: submitBy,
              submittedDate: submitDate
          }
          console.log(&quot;before submit&quot;, data) //this logs the same values as the function call
          onSubmit(data)
  
       }
  
       const subDate = new Date(plan.submittedDate).toLocaleDateString()
  
      return (
          &lt;&gt;
          
          {isSubmitted ? (
              
                  &lt;&gt;
                      &lt;CheckBoxIcon /&gt;
                      &lt;label&gt;{data?.fullName}&lt;/label&gt;&lt;br /&gt;
                      &lt;label&gt;{subDate}&lt;/label&gt;&lt;br /&gt;
                      &lt;Button color='warning' variant='contained' onClick={handleUnsubmitValues}&gt;Unsubmit&lt;/Button&gt;
                  &lt;/&gt;
              
          ) :
              &lt;&gt;
                  &lt;CheckBoxOutlineBlankIcon /&gt;
                  &lt;Button color='primary' variant='contained' onClick={handleSubmitValues}&gt;Submit Report&lt;/Button&gt; 
              &lt;/&gt;
          
                  
          }
       &lt;br /&gt;
       &lt;/&gt;
  
      )
  }
  </code></pre>
  <p>The mongoose/ express controller:</p>
  <pre><code>exports.updateReportStatus = async (req, res) =&gt; {
      console.log(&quot;req.body&quot;, req.body) //logs the values as supplied by the onSubmit
      try {
          const servicePlan = await ServicePlan.findOne({ _id: req.params.planId })
          if (req.body.submitted) {
              servicePlan.submitted = req.body.submitted
          }
          if (req.body.submittedBy) {
              servicePlan.submittedBy = req.body.submittedBy;
          }
          if (req.body.submittedDate) {
              servicePlan.submittedDate = req.body.submittedDate
          }
          if (req.body.approved) {
              servicePlan.approved = req.body.approved
          }
          if (req.body.approvedBy) {
              servicePlan.approvedBy = req.body.approvedBy;
          }
          if (req.body.approvedDate) {
              servicePlan.approvedDate = req.body.approvedDate
          }
          if (req.body.sent) {
              servicePlan.sent = req.body.sent
          }
          if (req.body.sentBy) {
              servicePlan.sentBy = req.body.sentBy;
          }
          if (req.body.sentTo) {
              servicePlan.sentTo = req.body.sentTo
          }
          if (req.body.sentDate) {
              servicePlan.sentDate = req.body.sentDate
          }
          console.log(&quot;status &quot;, servicePlan) //logs the same existing values, regardless of req.body
  
          servicePlan.save()
          res.send(servicePlan)
      } catch (error) {
          res.status(404)
          res.send({ error: &quot;Error updating report status&quot;, error})
      }
  }
  </code></pre>
  <p>Console log of values for submit (should be true and filled strings):</p>
  <pre><code>values for submit false &lt;empty string&gt; &lt;empty string&gt; 
  before submit 
  Object { submitted: false, submittedBy: &quot;&quot;, submittedDate: &quot;&quot; }
  
  onSubmit:  
  Object { submitted: false, submittedBy: &quot;&quot;, submittedDate: &quot;&quot; }
  </code></pre>
  <p>console.log values for unsubmit (should be false and empty strings like above)</p>
  <pre><code>values for unsubmit:  true 62410a1dcaac9a3d0528de7a 2022-09-15T15:55:27.758Z 
  before submit 
  Object { submitted: true, submittedBy: &quot;62410a1dcaac9a3d0528de7a&quot;, submittedDate: &quot;2022-09-15T15:55:27.758Z&quot; }
  
  onSubmit:  
  Object { submitted: true, submittedBy: &quot;62410a1dcaac9a3d0528de7a&quot;, submittedDate: &quot;2022-09-15T15:55:27.758Z&quot; }
  </code></pre>
  <p>Heres a network call showing the body being passed in the request and the response not responding:</p>
  <p><a href="https://i.stack.imgur.com/JoMFq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JoMFq.png" alt="Network request" /></a></p>
  <p><a href="https://i.stack.imgur.com/UwJBg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UwJBg.png" alt="network response" /></a></p>
  <p>For the state issue in recording and passing the values, I tried switching the functions being called by the onClick, but that just made it so the state controlling the button was not updating. My only guess at this point is there is a delay in the function calls between setting the state and passing the values to the handlesubmit on the frontend, as far as the backend not updating the model with the req.body values, I'm at a total loss.</p>
  <p>I've looked at this for hours and hours now, so I'm probably just missing some details Any ideas or guidance is greatly appreciated.</p>