Cannot map through array of files/images React

Question

I am creating an image(s) upload component in React. Every time the file input field changes I am updating the images state. Below the input field I am trying to loop through the images and log their names in the console. However, as soon as I select an image, I get the error TypeError: images.map is not a function. Here is my code:

import React, { useState } from 'react';

const ImagesInput = (props) => {
    const [images, setImages] = useState([]);

    const imageInputChange = (e) => {
        setImages(e.target.files)
    }

    return (
        <div>
            <input {...props} type="file" onChange={imageInputChange} multiple />
            {images.map((image) => {
                console.log(image)
            })}
        </div>
    )
}

export default ImagesInput;

Manish Kumar · Accepted Answer · 2022-01-02 15:15:39Z

2

The value of e.target.files is an array-like not an actual array. Just convert it to array before passing to setImages, like

setImages([...e.target.files])

Read here about array-like

answered Jan 2, 2022 at 15:15

Manish Kumar

1115 bronze badges

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

Comments

joinplastic · Accepted Answer · 2022-01-02 15:08:25Z

0

Before

setImages(e.target.files)

Try to add a condition like this, make sure e.target.files is the image arr you want

if(e.target.files){
  setImages(e.target.files)
}

answered Jan 2, 2022 at 15:08

joinplastic

213 bronze badges

Collectives™ on Stack Overflow

Cannot map through array of files/images React

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related