Get Name of the Picker?

I saw the merge where you can now pass up the event with the onChange handler, so I’m just having trouble actually getting the name of the picker I want to see. This is what I currently have for the Picker right now (which is mainly taken from docs):

{ (this.state.displayColorPicker) ?
          <div style={ styles.popover }>
            <div style={ styles.cover } onClick={ this.handleClose }></div>
          <SketchPicker color={ this.state.color } label="bgColor" onChange={ this.props.onChange } name={this.props.name} />
          </div> : null }

And my onChange is as such:

  handleColorChange(color, event) {
    const target = event.target;
    const name = target.name;

    console.log("NAME: " + name)
    console.log("COLOR CHANGING:" + JSON.stringify(color))

    // this.setState({ color: color.hex })
  };

I can succesfully get the color information, I’m just stuck on trying to get which color should go where. Feeling like I’m probably missing a very basic step here. 😕

[casesandberg]

I have thought about this and I don’t think adding this complexity to the library makes sense. What I propose is just using a curry function like below to pass the names of multiple pickers:

const handleColorChange = (name) => (color) => {
  this.setState({ name, color: color.hex })
}

and then you would use it like this:

<SketchPicker onChange={ handleColorChange('foreground') } />
<SketchPicker onChange={ handleColorChange('background') } />

The handleColorChange would take the name as the first argument and then retuns the traditional change information, along with the name.

[tmercado]

Not sure if anyone is still following this but doesn’t currying a function like that create copies of the handleColorChange function? so if you are mapping say 1000 things that could have a color changing option you’ll start to have performance issues.

changeHandler => name => color {
    const {pickers} = this.state;
    pickers[name] = color;
    this.setState({pickers});
}
this.state.pickers.map((p, i) => ( // I have 1000+ pickers to create
    <SketchPicker onChange={this.changeHandler('i')} value={p.color} />
);