How to get a reference of a specific input when render multiple InputRange

[jaugustodafranca]

I'm using multiples Inputs on the same component to change an object like this:

const currentDays = [ 
	{ day: 'SEG', hours: 2 }  
	{ day: 'TER', hours: 2 } 
	{ day: 'QUA', hours: 2 } 
]

And I'm rendering the multiples like this:

currentDays.map(current => (
      <div key={current.day}>
        <p className={styles.text}>{daysOptions[current.day]?.name}</p>
        <InputRageStyled
          minValue={1}
          maxValue={10}
          value={current.hours}
          name={current.day}
          onFormat={onFormatInputRange}
          onChange={onChangeRange}
        />
      </div>
    ))

How can I get the reference of which input I'm changing to update a specific object inside of currentDays?

Maybe the event to get the name of the input?

This is my onChange function:

const onChangeRange = useCallback((currentValue, event) => {
	console.log(currentValue) // return the correct value
	console.log(event)        // return undefined
  }, [])

[robba86]

I think an event is needed to. I miss onBlur & onFocus to handle keyboard events for better accessibility...
But adding event would make things more convenient to get the name, and more...

Or to let the developer get these values with ease and then make the choice to grab what ever the dev whants, not just the values.

Example of output:

{
   name: "name-of-input",
   label: "The label",
   type: "range-single",
   value: 200,
}

{
   name: "name-of-input",
   label: "The label",
   type: "range-multi",
   values: {
          max: 200,
          min: 10,
   },
}