I’m trying to get id from mui TextFiled element when select property is enabled. I’m getting undefined vlaue always
code:
export default ({
onChangeSelect,
input,
label,
options,
name,
required,
placeholder,
id
}) => {
return <TextField
value={input}
onChange={onChangeSelect}
select
id={id}
placeholder={placeholder}
label={label}
name={name}
required={required}
InputLabelProps={{ shrink: (placeholder || input), style: { fontSize: 16 } }}
>
{options.map(data => <MenuItem key={data.name} value={data.value}>{data.name}</MenuItem>)}
</TextField>
}
const handleIdCode = useCallback((e) => {
const { name, value, id } = e.target
console.log(name, value, id, 'test') // here id is undefined
})
I have debugged and passed id value to menu item and getting it from handler in the following way
solution:
export default ({
onChangeSelect,
input,
label,
options,
name,
required,
placeholder,
id
}) => {
return <TextField
value={input}
onChange={onChangeSelect}
select
placeholder={placeholder}
label={label}
name={name}
required={required}
InputLabelProps={{ shrink: (placeholder || input), style: { fontSize: 16 } }}
>
{options.map(data => <MenuItem id={id} key={data.name} value={data.value}>{data.name}</MenuItem>)} // added id here in menu item
</TextField>
}
const handleIdCode = useCallback((e, item) => { // added item has second params
const { name, value, id } = e.target
console.log(name, value, item?.props?.id, 'test') from the item getting id in this way
})