Async with FileReader in React

Question

I got a problem with fileReader to render a preview image for uploading.

I cannot get base64 to show the image because I do not know how to use async to get the image before return.

Below is my code:

<div className="previewsection-el">
  <ul>
    {acceptedFiles.map((file, index) => {
      var filetype = file.path.split(".")[1];
      switch (filetype) {
        case "jpg":
        case "png":
        case "jpeg":
          var readImg = "";
          let reader = new FileReader();
          reader.onload = next => {
            readImg = reader.result;
          };
          reader.readAsDataURL(file);
          //cannot return here.
          return (
            <li>
              <img src={readImg} />
            </li>
          );
        case "rar":
        case "zip":
          return (
            <li>
              <i className="file-archive" />
            </li>
          );
        default:
          return (
            <li>
              <i className="material-icons">insert_drive_file</i>
            </li>
          );
      }
    })}
  </ul>
</div>;