Currently facing an issue while trying to resolve this error https://i.stack.imgur.com/BZ304.png
The goal is to generate an automated form using the following function:
let descriptionsForm = (
<form>
{this.state.descriptions.map((description, index) => (
<Input
key={index}
elementType={description.elementType}
elemenyConfig={description.elementConfig}
value={description.value}
invalid={!description.valid}
shouldValidate={description.validation}
touched={description.touched}
changed={(event) => this.descriptionInputChangedHandler(event, index)}
/>
))}
</form>
)
The form displays correctly upon initial page load. However, the error occurs when attempting to input anything into the Input field.
Below is the descriptionInputChangedHandler function:
descriptionInputChangedHandler = (event, index) => {
console.log("ORIGINAL: ", this.state.descriptions)
const updatedDescriptions = {
...this.state.descriptions
};
const updatedDescriptionElement = {
...updatedDescriptions[index]
};
updatedDescriptionElement.value = event.target.value;
updatedDescriptionElement.valid = this.checkValidity(updatedDescriptionElement.value, updatedDescriptionElement.validation);
updatedDescriptionElement.touched = true;
updatedDescriptions[index] = updatedDescriptionElement;
let formIsValid = true;
for (let index in updatedDescriptions) {
formIsValid = updatedDescriptions[index].valid && formIsValid;
}
console.log("UPDATED D: ", updatedDescriptions);
this.setState({descriptions: updatedDescriptions, descriptionFormIsValid: formIsValid})
}
Upon inspection, the console logs appear as expected
https://i.stack.imgur.com/qJTXj.png
It seems like there might be an issue with updating data after the initial rendering of the input field. Any guidance would be greatly appreciated.
Thank you for your assistance.