Dynamically generated input onChange function loses additional argument context

Question

I am trying to pass option.title as a parameter to the onChange function of the corresponding generated RadioGroup form component.

onChange receives the correct event, but the option.title value is simply the last one that's rendered. How do I bind the option.title to it's component's onChange? Presently, when an event is triggered, option.title has taken the last generated element's value - and this is shown regardless of what element triggered the onChange.

generateList(){
        var list = []  
        for (var i in configs){
            var option = configs[i]
            list.push(
                <div>
                <div className="optionTitle">{option.title}</div>
                <RadioGroup onChange={(e) => this.handleRadioChange(option.title, e)}  className="configContainer" horizontal>
                    {this.generateRadio(option.options, option.title)}
                </RadioGroup>
                </div>
            ) 
        }
        return list
    }

score 0 · Accepted Answer · answered Sep 13 '17 at 20:21

Try this

generateList(){
        return configs.map((option) =>
                (<div>
                <div className="optionTitle">{option.title}</div>
                <RadioGroup onChange={(e) => this.handleRadioChange(option.title, e)}  className="configContainer" horizontal>
                    {this.generateRadio(option.options, option.title)}
                </RadioGroup>
                </div>
            ) )
    }

score 0 · Answer 2 · answered Sep 14 '17 at 06:53

You can use function currying to access both parameters:

handleRadioChange(title){
   return function(e){
      // both the event and the title are accessible here
   }
}

generateList(){
                return configs.map((option) =>
                        (<div>
                        <div className="optionTitle">{option.title}</div>
                        <RadioGroup onChange={this.handleRadioChange(option.title)}  className="configContainer" horizontal>
                            {this.generateRadio(option.options, option.title)}
                        </RadioGroup>
                        </div>
                    ) )
}

Keep in mind that invoking function in render will create an instance on each render.
Read this for more details.

Dynamically generated input onChange function loses additional argument context

2 Answers2