How can I add ID and inputs array to my state? - arrays

Question

I'm trying to update my state which is :
inputData: {
id: '',
inputArr: ['']
}
From a form I'm getting from my state and I generate him like so :
inner = arr.input.map((inputs, index) => (
<li key={index} name={index} id={inputs.id}>
<label>{inputs.inputLabel}</label>
<input
// value={inputs.inputValue}
type={inputs.inputType}
onChange={this.handleChangeInp}
/>
</li>
))
It will have mulitple inputs, so I wish to add all their inputs in the array by the order so i can extract it later, but my handleChange function doesn't seem to work, anyone know why (I cant get the ID that I'm passing with the event, nor to update the array)?
handleChangeInp = e => {
const id = e.target.id;
console.log(`the id is ${id}`);
const index = Number(e.target.name);
const inputData = this.state.inputData.inputArr.map((ing, i) => {
console.log(i);
i == index ? e.target.value : ing;
});
}
thanks for the help!

Answer 1

e.target will reference to the element and to get its props, like id, name, etc. you all need to have the props on the element itself.
To get the id, you'll need to pass the id props:
<input
id={inputs.id}
type={inputs.inputType}
onChange={this.handleChangeInp}
/>
Now, e.target.id will get the inputs id. To get the name, do the same as above.
In this example, e.target is <input /> element. And to get its properties, you just need to add the props.

Answer 2

I think the solution is simple. Instead of putting the id and name attribute on the li element, add it to the input. This should allow you to get name from e.target.
UPDATED: Based on additional research:
The Synthetic onChange event in React does not pass the id attribute along. You need to come up with another solution. If you need to keep both the name and index of the input within an array, you can combined them with a special character and split them in the event handler. Looking back on some forms I have created, I see that I found it easy to use the pipe character |, since it is usually not used, but even still, I know it will be the last pipe in my string.
Updated Map of Inputs Array
inner = arr.input.map((inputs, index) => {
console.log({inputs});
return (
<li key={index}>
<label>{inputs.inputLabel}</label>
<input
name={inputs.id + "|" + index}
value={inputs.inputValue} /* try not commenting this out */
type={inputs.inputType}
onChange={this.handleChangeInp}
/>
</li>
)
});
Updated onChange handler
handleChangeInp = e => {
const name = e.target.name.split("|");
// index will be last element of array, pop it off
const index = Number(name.pop());
// join the name array back with the pipe character just in case it's used in the name
const id = name.join("|");
console.log(`the id is ${id}`);
console.log(`the index is ${index}`);
const inputData = this.state.inputData.inputArr.map((ing, i) => {
console.log(i);
i == index ? e.target.value : ing;
});
}

Answer 3

First update:
Proper parameters for generated inputs:
let inner = arr.input.map((inputs, index) => (
<li key={index} >
<label>{inputs.inputLabel}</label>
<input
id={index}
name={inputs.id}
// value={inputs.inputValue}
type={inputs.inputType}
onChange={this.handleChangeInp}
/>
</li>
))
This way we'll have id and name available in event but deep state structure forces us to write sth like this:
handleChangeInp = e => {
const id = e.target.id;
console.log(`the id is ${id}`);
const index = Number(e.target.id);
// deep state update
const newInputArr = this.state.inputData.inputArr.map((ing, i) => {
console.log(i, e.target.name);
return (i == index) ? e.target.value : ing;
});
const newInputData = {...this.state.inputData, inputArr: newInputArr}
this.setState({ inputData: newInputData }, ()=>{console.log(this.state.inputData)})
}
It 'works' ... but this method of state update has 2 issues/drawbacks:
values are stored in array by index - we have only index-value pairs;
the second issue is more serious - it stores only first value! For map usage ('searching') we should have array initialized for each index - otherwise it doesn't store values.
My advise - use object (map) to store values:
this.state = {
inputData: {
id: '',
inputArr: {}
}
};
and handler like this:
handleChangeInp = e => {
const {name, value} = e.target;
console.log(name, value);
// deep state update
const newInputArr = {...this.state.inputData.inputArr,[name]:value};
const newInputData = {...this.state.inputData, inputArr: newInputArr}
this.setState({ inputData: newInputData }, ()=>{console.log(this.state.inputData)})
}
This way we have id-value pairs and only for 'touched' fields.
Working example.
Of course value for inputs can be read from state (if defined):
value={this.state.inputData.inputArr[inputs.id]
? this.state.inputData.inputArr[inputs.id] : ''}
// or
value={this.state.inputData.inputArr[inputs.id]===undefined ? ''
: this.state.inputData.inputArr[inputs.id] }
// f.e. when we're using type conversions
// and numerical value `0` could be used as valid input