Send a photo to the bank through onChange on React?

Question

I am converting the photo to Base64 and displaying on the console, but the value in useState does not update immediately. It shows only from second attempt to upload the photo.

import React,{ useState } from 'react';

const Portfolio = () => {

  const[fotoPortifolio, setFotoPortifolio] = useState({
        foto: ""
    })

   function handleFoto(e){
  
      var file = e.target.files[0],
       reader = new FileReader();
           
      reader.onloadend = function () {
       var b64 = reader.result.replace(/^data:.+;base64,/, '');
        setFotoPortifolio({...fotoPortifolio,
         foto:  b64
        })};
           
        reader.readAsDataURL(file);

    addFoto()
}


   function addFoto() {    
  
        console.log(fotoPortifolio)

    }

  
  return (
        <>

        <input  name="foto" onChange={handleFoto} type='file' accept="image/png, image/jpeg"/>
               </>

    )
};        

Answer 1

The method useState is asynchronous which means it takes time to run and when you give the console.log in the variable photoPortifolio she is not yet ready with the value.

Recommended to check the value of a status whenever it is changed is to use the useEffect which is also a React hook.

Add this hook to your code:

useEffect(() => { console.log(fotoPortifolio); }, [photoPortifolio])

So every time the value of photoPortfolio is changed, the useEffect hook will be called.

I hope it helps.