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}
      </>
    ))
  );
}