In the documents for MUI's autocomplete component I'm told that the renderTags should have the following form:
Render the selected value.
Signature:
function(value: Array<T>, getTagProps: function) => ReactNode
value: The value provided to the component.
getTagProps: A tag props getter.
And when I look at the examples (such as that below) it's clear that getTagProps is filling in the options for the tag elements that have been selected.
renderTags={(tagValue, getTagProps) =>
tagValue.map((option, index) => (
<Chip
label={option.title}
{...getTagProps({ index })}
disabled={fixedOptions.indexOf(option) !== -1}
/>
))
}
Alright, I get the idea is that somehow getTagProps is supposed to fill in the props for each Chip based on it's index but the only function I can find in the source that's passed in as getTagProps is the following trivial function:
getTagProps: ({ index }) => ({
key: index,
'data-tag-index': index,
tabIndex: -1,
onDelete: handleTagDelete(index),
}),
If that's the value that's always passed as getTagProps I can figure out what's going on. However, what's confusing me is the fact that this would make getTagProps just a constant so why does renderTags need a function argument? I mean they could have just made getTagProps a function of only tagValue and pasted in the code above where getTagProps({index}) is called.
Is getTagProps really always just the above function or am I missing something about how it gets it's value?