Iterate over children, find last element
renderChildren = () => {
const { children, divider } = this.props;
return (
React.Children.map(children, (child, index) => (
<>
{child}
{(index < children.length - 1) && divider}
</>
))
);
}
Update:
const children: React.ReactNode Object is possibly 'null' or 'undefined'.ts(2533)
Is out of scope of this answer, but to handle this scenario
renderChildren = () => {
const { children, divider } = this.props;
if (children) { // this fixes error above
return (
React.Children.map(children, (child, index) => (
<>
{child}
{(index < children.length - 1) && divider}
</>
))
);
}
return null
}
That error comes because you defined your prop as children?: ReactNode
, because it's optional TypeScript secures you from undefined values
You could use index and check if it equals to the length of the children
array:
renderChildren = () => {
const { children, divider } = this.props;
return (
React.Children.map(children, (child, index) => (
<>
{child}
{index !== children.length-1 && divider}
</>
))
);
}