I’m running into an issue here. What I’m trying to do essentially is having a form that has the doc name (in this case we’ll call it documents) and doc number and other fields, but not important at the moment. Within in this form a user can upload pdf files that are related to this one form and each file that has been uploaded has 2 drop downs that can associate user and country. That is what I want and need, however, it appears that the state management that I have as of now overwrites the selection of country and applies to all of them.
EX: Expected behavior
File 1: User: Danny M., Country: Mexico
File 2: User: Leo Messi, Country: Argentina
File 3: User: C. Ronaldo, Country: Portugal
Actual Behavior
File 1: User: Danny M., Country: Mexico <—- If I change just these two fields it reflects to all
File 2: User: Danny M., Country: Mexico
File 3: User: Danny M., Country: Mexico
The code as it follows below:
let document = {
document_name: '',
document_number: '',
region: '',
country: '',
user: '',
// Other fields
}
const [documentInput, setDocumentInput] = useState<any>(document)
const onModalChange = (e: any) => {
console.log(e.target)
const { id, value } = e.target
setDocumentInput({
...documentInput,
[id]: value,
})
}
const itemTemplate = (file: any, props: any) => {
return (
<div className='flex align-items-center flex-wrap px-0 py-1'>
<div className='inline-flex align-items-center'>
<label className='upload-label' htmlFor='user'>
Original Filename:
</label>
<span className='flex flex-column text-left ml-3'>
{file.name}
<small>{new Date().toLocaleDateString()}</small>
</span>
</div>
<Tag
value={props.formatSize}
severity='warning'
className='px-3 py-2'
/>
<div className='inline-flex align-items-center'>
<label className='upload-label' htmlFor='user'>
User:
</label>
<AutoComplete
className='ml-3'
value={documentInput.user}
suggestions={filteredUsers}
completeMethod={searchUser}
field='label'
forceSelection
dropdown
id='language'
onChange={e => modalChange(e)}
/>
</div>
<div className='inline-flex align-items-center'>
<label className='upload-label' htmlFor='country'>
Country:
</label>
<AutoComplete
className='ml-3'
value={documentInput.country}
suggestions={filteredCountries}
completeMethod={searchCountry}
field='label'
forceSelection
dropdown
id='country'
onChange={e => modalChange(e)}
/>
</div>
<Button
type='button'
icon='pi pi-times'
className='p-button-outlined p-button-rounded p-button-danger ml-auto'
onClick={() => onTemplateRemove(file, props.onRemove)}
/>
</div>
)
}
return(
<>
//Other fields
<FileUpload
ref={fileUploadRef}
name='demo[]'
url='upload'
multiple
accept='application/pdf'
id='upload_docs'
maxFileSize={1000000}
onUpload={onTemplateUpload}
onSelect={onTemplateSelect}
onError={onTemplateClear}
onClear={onTemplateClear}
headerTemplate={headerTemplate}
itemTemplate={itemTemplate}
emptyTemplate={emptyTemplate}
chooseOptions={chooseOptions}
uploadOptions={uploadOptions}
cancelOptions={cancelOptions}
/>
</>
)
I understand why every time we change user or country is over writing to all files when each file dropdown should independent but don’t know how to overcome this issue. Also what is name=”demo[]” what is it exactly? I apologize if I am asking a lot in this post, I’m just a little confused on how to tackle this issue. If the question and/or explanation is not clear please let me know and I’ll try and edit this post. Thanks in advance.
