I have a customInput with type select, it's onChange is running a setState.
my state object looks like this
const [upload, setUpload] = useState({
uploadType: 'files',
selectHeader: [],
defaultFields: [
{
baseField: 'First name',
},
{
baseField: 'Last name',
},
{
baseField: 'Phone number',
},
{
baseField: 'Company',
},
{
baseField: 'Email',
},
]
});
When the onChange runs, I am successfully adding a new object to the selectHeader array with a
{value: firstName, index: 1}
The issue is that when a user selects a new value for a header at index 1 ( or any index for that matter) I want to check if there is duplicate in this array.
Im not sure how to do this inline with setState and cant seem to find a good thread on this example
Here is the CustomInput with type select below
<thead>
<tr>
{
fileContacts.map((contact) => (
<th scope="col" key={fileContacts.indexOf(contact)}>
<WizardInput // this is just a fancy CustomInput at its core
type="select"
defaultValue={"Do not Import"}
tag={CustomInput}
name="selectHeader"
id="selectHeader"
onChange={({ target }) => {
setUpload({...upload, selectHeader: [...upload.selectHeader, {value: target.value, index:fileContacts.indexOf(contact)}]})
// this is adding a duplicate object if the user changes the header value twice.
}}
innerRef={register}
errors={errors}
options={['First Name', 'Last name', 'Phone', 'Email']}
/>
</th>
))}
</tr>
</thead>
Create a new variable for the selectheader and filter that array for any duplicates (for any help check out this question How to remove all duplicates from an array of objects?) and then pass it into setUpload
Maybe you could filter out the previous one before adding in the new one.
setUpload({...upload, selectHeader: [...upload.selectHeader.filter(({value}) => value != target.value), { value: target.value, index:fileContacts.indexOf(contact) }] })
Try to use functional updates:
setUpload((upload)=>{
if(upload.selectHeader.some(h => h.value == target.value)) return upload
return {
...upload,
selectHeader: [
...upload.selectHeader,
{
value: target.value,
index:fileContacts.indexOf(contact)
}
]
}
})