import React, { useState } from 'react';
const UserForm = () => {
const [users, setUsers] = useState([]);
const addUser = () => {
setUsers([...users, { name: '', image: null }]);
};
const handleImageUpload = (e) => {
const file = e.target.files[0];
if (!file) return;
setUsers((prevUsers) =>
prevUsers.map((user, index) =>
index === prevUsers.length - 1
? { ...user, image: file }
: user
)
);
};
return (
<div>
<button onClick={addUser}>Add User</button>
{users.map((user, index) => (
<div key={index}>
<input type="file" accept="image/*" onChange={handleImageUpload} />
{user.image && <img src={URL.createObjectURL(user.image)} alt={`User ${index}`} />}
</div>
))}
</div>
);
};
export default UserForm;
Please try with this. Hope you any help. Thanks.