I am struggling with handling custom attributes in my changeHandler function. Unfortunately, React does not seem to acknowledge the custom "data-index" attribute.
All other standard attributes (such as name, label, etc.) work fine.
What could be the issue here?
Here is my input field:
<Input
name="test"
label="test 1"
data-index="0"
value={values.test}
onChange={handleInput}
/>
In my changeHandler function (the data-index attribute remains null):
const handleInput = (e: any) => {
const { value } = e.target;
const dataIndex = e.target.getAttribute('data-index');
setValues({
...
});
};
UPDATE:
I discovered that when I check e.target.attributes, it shows the following.
NamedNodeMap {0: aria-invalid, 1: id, 2: name, 3: type, 4: class, 5: value, aria-invalid: aria-invalid, id: id, name: name, type: type, class: class, …}
0: aria-invalid
1: id
2: name
3: type
4: class
5: value
length: 6
The data-index attribute is completely ignored. What could be causing this?