title: Can I change the state in reactjs without reloading the page
body: <p>Can I change the state of a component in reactjs without reloading the page? I have a react app with nodejs where users can make comment on a post.
  I don't want the entire page to reload each time a user makes a comment. This I have achieved but I noticed that after the Post api call for making a post, the new states will not reflect until a page reload. Here is my code:</p>
  <pre><code>const [commentdescription, setCommentDescription] = useState('');
  
  const handleComment = async ()=&gt;{
   
  const newComment = {
      author: user.userId,
      role: user.role,
      commentdescription,
  };
  
  try{
       setIsLoading(true)
      await axiosPrivate.post(&quot;/posts/&quot;+ path + &quot;/comment&quot;, newComment, { withCredentials: true,
          headers:{authorization: `Bearer ${auth}`}
          });
          
         setIsLoading(false)
         setCommentDescription('')
  }catch(err){
      console.log(err)
  }
  };
  </code></pre>
  <p>This is how I connected the comment state with a button that calls the api:</p>
  <pre><code>&lt;textarea className='comment-wrapper' type='text' placeholder='Share your comment'
              onChange={(e) =&gt; setCommentDescription(e.target.value)}&gt;&lt;/textarea&gt;
          &lt;button className={isLoading? 'comment-btn-no-cursor comment-btn' : 'comment-btn'}onClick={handleComment}&gt;Post Comment&lt;/button&gt;
  </code></pre>
  <p>I wanted <code>setCommentDescription </code>to be set back to empty string but it does not reflect after the comment has been made. It only reflects once the page refreshes. Though the new comment made actually reflects on the page.
  The major reason I want to get this implemented is this: when a user makes a comment on the post, the comment reflects on the post for sure after successful to the api using axios, however, the text contents of the user remains inside the textarea box until the page is refreshed which will now make the textarea box to pick the default state which is an empty string. This doesn't look good at all. I would like the textarea box to reflect the state after the successful api call without reloading the entire page. It makes no sense for the entire page to reload each time a user makes a comment. This same issue is happening with replies to comments.</p>
  <p>How can I get the new state to work without refreshing the entire page?</p>