Uploading Images in Browser using react issue

Question

I'm trying to make the user upload several images to the browser using React (then save them of course to a server).

The problem is when I click choose image sometimes it work and sometimes not. Same for showing the images Here is my code:

const [name, setName] = useState('');
const [description, setDescription] = useState('');
const [selectedFiles, setSelectedFiles] = useState([]);
const [isSelected, setIsSelected] = useState(false);

const fileSelectedHandler = (event) => {
    console.log(event.target.files[0]);
    const files = selectedFiles;
    files.push(event.target.files[0]);
    setSelectedFiles(files);
    setIsSelected(true);
    console.log(selectedFiles);
}

const fileUploadHandler = () => {
    axios.post('http://')
}

return (
    <div className="container">
        <p>Please Enter Category name: </p>
        <TextField
            id="standard-multiline-flexible"
            label="Name"
            multiline
            rowsMax={4}
            variant="filled"
            color="secondary"
            value={name}
            onChange={(event) => setName(event.target.value)}
        />
        <p>Please Enter Category Description: </p>
        <TextField
            id="standard-multiline-flexible"
            label="Description"
            multiline
            rowsMax={4}
            variant="filled"
            color="secondary"
            value={description}
            onChange={(event) => setDescription(event.target.value)}
        />
        <input type="file" onChange={fileSelectedHandler}/>
        
        {
            selectedFiles.length > 0 ?
            
                <div className="row">
                    {
                        selectedFiles.map((file, index) => {
                                console.log(file, index);
                                return (
                                    <div className="column">
                                        <img className="added_images" width="100%" src={URL.createObjectURL(file)} thumbnail />
                                    </div>
                                )
                        })
                    }
                </div>
            :
                null
        }
    </div>
)

and here is my styling:

 * {
    box-sizing: border-box;
}

.container {
    display: flex;
    flex-direction: column;
}

.column {
    float: left;
    width: 33.33%;
    height: 200px;
    padding: 5px;
}
  
/* Clear floats after image containers */
.row::after {
    content: "";
    display: table;
    clear: both;
}

When I debugged The selectedFiles hook contains all the files I uploaded. BUT the problem it is not triggering the render. Why is that?

Answer 1

Here issue is you are assigning whole selectedFiles to files like following

const files = selectedFiles;

This will also assign reference of selectedFiles to files const so after pushing new value to array when you try to update selectedFiles with files both array reference will be same so react will not trigger re-render.

To solve this try to shallow copy array like below:-

const files = [...selectedFiles];

Or when updating array, update it with spread operators like below:-

setSelectedFiles([...files]);

Or you can directly update your array state like below without copying it in new constant

const fileSelectedHandler = (event) => {
    setSelectedFiles(prevSelected => [...prevSelected, event.target.files[0]]);
}