React - handleChange from multiple inputs with one function
I have multiple inputs on the page, I would like to handle the change with only one function, which I do already with this code:
handleInputChange(event) {
let modules = this.props.templateModules.slice()
let inputs
for(let i in modules) {
inputs = modules[i].fields
}
for(let i in inputs){
if(inputs[i].name === event.target.name){
inputs[i].value = event.target.value;
this.setState ({inputs});
break;
}
}
}
The structure of these modules (which are dynamically added on button click) from the console:
and input fields with each module:
as you can see that the names are unfortunately not unique, so my code does not work as it should if there is more than one module on the page. I would like to display only those modules of a module that are currently in focus (suppose this might be an option), just not sure how.
Any ideas? :)
source to share
Ok so if anyone has the same problem as me I think I have found a solution for this.
Instead of handling changes to these inputs in the container component, which I did originally, I split the rendering of the module into a separate class so that the structure looks like this at the moment ...
Container Component
-> Presentational Component
-> Module Component (class containing the function handleChange)
I'm not sure if this is the correct way to do it, but this is the only way I could think to make it work and it WORKS! :)
source to share