React - handleChange of multiple inputs by one function

Question

I have multiple inputs on the page, I'd like to handleChange by only one function which I'm doing 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 those modules (which are added dynamically on button click) from console is:

and the input fields withing each of the module:

as you can see the names unfortunately are not unique thus why my code is not working as it should be if there is more than one module on the page. I'd like to map only the fields of module currently on focus (guess that could be an option) just not sure how to do it.

Any ideas? :)

maybe this post could help you: http://stackoverflow.com/questions/21029999/react-js-identifying-different-inputs-with-one-onchange-handler — funcoding, Mar 30 '17 at 12:48
@funcoding not really, if i could i wouldn't be asking this question...thanks, I'll check it out — Michaela, Mar 30 '17 at 13:39
Can you share the whole React class? I'd like to see how you render the html — funcoding, Mar 30 '17 at 13:47
it's quite complex, that's why i went with printing the structure into console — Michaela, Mar 30 '17 at 13:49

score 0 · Answer 1 · answered Mar 30 '17 at 16:14

Okay, so if anyone has the same issue as me, I think I found a solution to this.

Instead of handling the change of those inputs in container component which I was doing originally I separated the module rendering into a separate class so the structure looks like this at the moment...

 Container Component

      -> Presentational Component

           -> Module Component (class containing the function handleChange)

I'm not sure if that's the correct way to do it but it's the only way I could think of to make it work, and it WORKS! :)

React - handleChange of multiple inputs by one function

1 Answers1