Unable to render a state variable value in React Js

Question

I'm trying to upload a file. There are some file validations performed on selecting a file. Now, I want to display a message, like "validating file, please wait!" till the function (fileChange()) in the below code gets completed.

I don't see the message to be displayed, Can anyone please help me why is it happening ?

class FileUploaderComponent extends Component {

    constructor(props) {
        super(props);
        this.state = {
            validatingFile: false,
        }
    }

    fileChange = event => {
        this.setState({
            validatingFile: false,
        });
        if (event != undefined) {
            const inputFile = event.target.files[0];
            this.setState({
                validatingFile: true,
            });
            const fileReader = new FileReader();
            fileReader.readAsArrayBuffer(inputFile);
            fileReader.onload = (e) => {
                const bufferArray = e.target.result;
                const wb = XLSX.read(bufferArray, { type: "buffer" });
                const wsname = wb.SheetNames[1];
                ... file validations
            };
        }
        this.setState({
            validatingFile: false,
        });
    }



    render() {        
        return (
            <div>
                <h2 className='common-text'>Upload your file below:</h2>
                <input 
                    className='input-block' 
                    type="file" 
                    onChange={this.fileChange} 
                    accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" 
                />
                {this.state.validatingFile ? <h6 className='common-text'> Validating File. Please wait!</h6> : ""}
                
        );
    }
}

lawrence-witt · Accepted Answer · 2021-06-16 19:59:10Z

1

Move the final call to set state inside the onload callback:

fileReader.onload = (e) => {
  const bufferArray = e.target.result;
  const wb = XLSX.read(bufferArray, { type: "buffer" });
  const wsname = wb.SheetNames[1];
        
  ... file validations
        
  this.setState({
      validatingFile: false,
  });
};

The onload callback is triggered asynchronously after the file has finished loading. In your current code sample, the call to set state back to false happens before it has processed the data. Since multiple successive state calls are batched, the effect is essentially that no change occurs, even though you set state to true previously.

answered Jun 16, 2021 at 19:59

lawrence-witt

9,5023 gold badges18 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Unable to render a state variable value in React Js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related