Can't get item position a list
buildtheui opened this issue · 1 comments
I'm trying to create functionality in my code where nested Items in a list may have different bullets if they're nested. Accessing the level
inside value is enough for unordered items but for ordered items, I'd need the item element position with regard to the parent as well. i.e I want to render something like the sanity editor shows while nesting a list:
In this case the type
attribute in <ol/>
works fine but for any other custom ordered kind of bullet I'd need the position in the list.
looking at the types index seems like a good candidate, but when I try to get the index I only get repeated 1's and 3's which either seem broken or its purpose is different, my workaround was to mutate the value prop in the list to add an order
property like this:
bullet: ({ children }) => {
return (
<ul className={style?.bullet}>
{Children.map(children, (child, idx) => {
if (isValidElement(child)) {
child.props.value.order = idx;
}
return child;
})}
</ul>
);
},
And then in the listItem I've access to level and order to render the bullet that I want, but I wanted to ask if is there a better way, or yes it is, index
is the answer but is not actually working.
Closing this as it is not formally an issue - please feel free to ask this question in the Sanity.io community slack. Thank you!