javascript - ReactJS simple image upload buffer displays null

Question

Inside a component, I have an input field for an image like so:

function AFunction () {

    const [imageTitle, setImageTitle] = useState("")
    const [buffer, setBuffer] = useState(null)

    // for file (does not work)
    <input type='file' accept=".png, .jpg, .jpeg" onChange={(event) => {
                    event.preventDefault()
                    const file = event.target.files[0]
                    const reader = new window.FileReader()
                    reader.readAsArrayBuffer(file)
                
                    reader.onloadend = () => {
                        setBuffer(Buffer(reader.result))
                        console.log('buffer', buffer)
                    }
    }} />

    // for title (works)
    <input id="imageTitle" type="text" value={imageTitle} onChange={e => setImageTitle(e.target.value)} />

}

This code gets the title correctly, but displays the buffer as null

Full behaviour:

1. Upload image from file...
2. Image gets uploaded
3. console.log displays null
4. further debugging proves title is known after a change in input field

I tried altering the useState parameter with "", also does not work.

question from:https://stackoverflow.com/questions/65887894/reactjs-simple-image-upload-buffer-displays-null

Answer 1

setState in React is asynchronous, therefore you console log the previous state.