Pass custom data as props in ColorPicker component

[danielbettech]

How can I pass a custom name to the Color Picker component, so I can catch up the name value in the onClick event? I need this string so I can change the piece of data related to that component, as I have more than one ColorPicker in the website. In the event I'm only getting the color values.

I would be nice I can pass a name property to the component. Is there any way?

[danielbettech]

I resolve it wrapping the component and passing props to the parent.

[danielbettech]

The solution in my last comment makes the component non reusable.

This is my code for the custom component:

import { ColorPicker } from 'material-ui-color'

function InputControlColor(props) {
  const { subtitle, value, name, handleChangeCurrentHexValue } = props

  return (
    <FormGroup>
      <Wrapper>
        <SubTitle>{subtitle}</SubTitle>
        <Value>{value}</Value>
      </Wrapper>

      <ColorPicker
        value={value}
        name={name}
        onChange={handleChangeCurrentHexValue}
      />
    </FormGroup>
  )
}

export default InputControlColor

Then I'm using the component like this:

<InputControlColor
  subtitle="COLOR"
  value={shapeBackgroundColor}
  name="shapeBackgroundColor"
  handleChangeCurrentHexValue={handleChangeCurrentHexValue}
/>

In my handleChangeCurrentHexValue function I'm catching the event, but I need the name so I can change the state programmatically.

This is my function:

const handleChangeCurrentHexValue = (event) => {
  const { hex } = event
  changeCurrentValue(activeControl, event.target.name, `#${hex}`)
}

But event.target.name is not set.

How can I achieve this? I'm using this component in different places so I need that name string to make it work.