How to solve async setState poblem?

I've code below. console.log from useEffect shows current "files" value, but console.log from handleInputChange function always show previous value. I understand this is because of async setState behavour, but I don't understand how to make it work.

   import React, { useState, useEffect } from 'react';
    import Button from '../Button/Button';
    
    function Card({ accept }) {
      let [uploadDisabled, setUploadDisabled] = useState(true);
      let [multiple, setMultiple] = useState(true);
      let [files, setFiles] = useState([]);
    
      function handleOpenClick() {
        const inputEl = document.getElementById('file');
        inputEl.click();
      }
    
      useEffect(() => {
        console.log(files);
      });
    
      function handleInputChange(event) {
        event.preventDefault();
    
        if (!event.target.files) return;
    
        setUploadDisabled(false);
        setFiles(Array.from(event.target.files));
        console.log(files)
    
        files.forEach((file) => {
          const reader = new FileReader();
    
          reader.onload = (event) => {
            const src = event.target.result;
            const alt = file.name;
          };
        });
      }
    
      return (
        <div className='card'>
          <input
            type='file'
            id='file'
            multiple={multiple}
            onChange={(event) => handleInputChange(event)}
            accept={accept.join(',')}
          />
          <Button value='Open' className='btn' handleClick={handleOpenClick} />
          <Button value='Upload' className='btn primary' disabled={uploadDisabled} />
        </div>
      );
    }
    
    export default Card;

Via Active questions tagged javascript - Stack Overflow https://ift.tt/bGF9N6T