Ensuring the state is correctly updated upon form submission in React JS

Is there a way to reset the state to blank after submitting the form? I attempted to clear it again upon submission, but the state still retains its value. How can I revert the state back to its initial state after finishing the submission?

state = {
    importExcel: '',
    active: true
  };

  handlerChange = e => {
    this.setState({
      importExcel: e.target.files[0],
      active: !this.state.active
    });
  };

  handlerOnSubmit = e => {
    e.preventDefault()
    const formData = new FormData();
    formData.append('importExcel', this.state.importExcel);

    api.post('web/user/import', formData)
    .then(res => {
      const { message, success } = res.data;
      const alert = swal({
        title: success === false ? 'Gagal Upload' : 'Berhasil Upload',
        text: message,
        icon: success === false ? 'error' : 'success',
        // timer: 5000,
        button: true
      })

      if (success === false) {
        return alert
      } else {
        return alert
      }
    })

    this.setState({
      importExcel: '',
      active: true
    })
  }

Answer №1

if (result === false) {
    return alert
} else {
   return alert
}

The function alert is being returned regardless of the condition, which means the code following this block never gets executed.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Grid-based timekeeping design

Currently working on a clock grid layout and seeking some advice on the next steps. The layout has been created but still needs some adjustments to achieve perfection. What would be the most effective approach for correcting it? Would offsetting it using a ...

Ensuring the checkbox is disabled prior to editing

Check out my table below: https://i.stack.imgur.com/7byIa.png Whenever I click the edit button, I can modify the status field and action field. This feature works correctly. However, the issue is that I am able to change the values of status and action e ...

Securing Routes with Firebase User Authentication in ReactJS

Currently, I am encountering an issue with the auth.onAuthStateChanged function in my Firebase user authentication service integrated with ReactJS. The function fires after the component has already been rendered, causing problems with redirecting users to ...

Version 5.1.3 of Bootstrap now combines the $colors with the $theme-colors map for enhanced customization

I am attempting to introduce some color variables like "blue", "indigo" ... to the $theme-colors map. It appears to be functioning, but after compiling, it seems duplicated in the :root selector as shown in the image below. Here's ...

Point the direction to nextjs and react native expo web

I am currently working on redirecting a URL to another within my website, specifically in Next.js and Expo React Native Web. While I don't have an actual "About" page, I do have other pages nested under the "about" folder and am aiming to direct any ...

Is it possible to automatically select a file and upload it to a specific server? If so, how can this

Hey there! I'm looking for a code snippet that allows me to automatically select a file and upload it to a specific link. Any ideas on how to accomplish this task? Here is the HTML code: <html> <head><title>Uploading</title>& ...

Authentication of users using NextJS Dashboard App API

I am currently following this tutorial, but instead of fetching data via a PostgreSQL request, I want to utilize an API. When I call an async function with await, it initially returns undefined and then the user object after receiving a response from the ...

Creating a rotating gallery with jQuery that can be navigated both forwards and backwards

Currently, I have a jQuery gallery that allows users to view images by moving forward only. What I'm looking for is a way for the user to click on the right side of the image to move to the next one and on the left side of the image to go back to the ...

Shift the column upwards for devices with smaller screens

I need help with a layout issue I am facing. Currently, my layout looks like this: [blurb] (8) [form] (4) However, I want the [blurb] to take up col-md-8 and the [form] to take up col-md-4 so that they are full width on smaller devices. On smaller devic ...

Setting a placeholder for an img tag in Angular: A step-by-step guide

What is the process for adding a placeholder to an image in AngularJS using the img element? I am currently setting the image dynamically with ng-src in my application. ...

What is the most effective way to populate an element using jQuery?

When you click a button with jQuery, I am generating a modal (Bootstrap modal) as a string. This modal has two option classes: Call Today and Call Tomorrow, which seems fine so far. Upon clicking the button, the modal is created, prompting me to add two a ...

Incorporating a MUI5 theme into a custom emotion-themed application

I'm currently working on an application that incorporates multiple themes. One of these is a Material UI theme specifically designed for MUI v4, while the other is an emotion theme used by non-MUI components. In my attempt to transition to MUI v5, I ...

Creating Custom Builds with React App by Forking

My React development workflow has evolved with my own webpack setup, but as my projects get bigger, the build process slows down. It's hard for me to optimize it further and having all the development dependencies in the project can be chaotic. I&apos ...

Sharing resources between different origins and the file:// protocol

I have been developing an HTML5 application that is collecting data from various sources using JSONP. So far, everything involving a GET request has been functioning perfectly. However, I have encountered a hurdle while attempting to make a POST request. T ...

Generating an <article> with React to encapsulate elements

I'm attempting to generate a list of 'cards', each consisting of three elements. The parent component, ItemCard, produces the following structure: <> <article> <ItemName data={items} /> ...

CSS transform causing scrolling issues in Microsoft Edge browser

Whenever I click a button, a div flips. Once flipped, the div contains a scrolling list. If the list is not long enough to scroll, everything works fine. However, if the list is long enough to require scrolling, the items disappear... This issue ...

Interacting with JSP through session management

Hello, I am working on a JSP program that involves displaying a number along with a button. The objective is to have the displayed number increment whenever the user clicks the button. Sessions are also intended to be included in this program. Here is wha ...

Achieving optimal performance with scoped CSS in Vue.js

As I work on creating a new app using VueJs, I have noticed the implementation of "css scoped" as shown below: <style scoped> .example { color: red; } </style> <template> <div class="example">hi</div> </template> ...

What causes HTML/Django template to run code in a non-linear fashion?

I was puzzled by the behavior of this particular html template I learned in an online class. It seemed to be executing out of order: The python form class is called using Django's syntax {{form}} which injects blank fields for user input (name, email ...

Is there a way to retrieve the chosen selection from a select dropdown element using JavaScript?

As someone who is still learning JavaScript, I've come across a particular issue. Within a webpage, there is a select dropdown as shown below: <select id="selTipoRap" class="form-control" th:field="*{tipoRappresentante}&qu ...