Ever wanted to join react children like you join an array?

React Join Children

This file is only here to provide the title of the gist

example-component.jsx

import React from 'react'
import joinChildren from 'react-join-children'
import { Item, Separator } from 'justanexample'

export default class MyComponent extends React.Component {
  render () {
    return <div>
      { joinChildren(this.props.items, this.renderItem, this.renderSeparator) }
    </div>
    // with 3 items, joinChildren returns [<Item>, <Separator>, <Item>, <Separator>, <Item>]
  }
  
  renderItem = (item, index) => {
    return <Item key={ index } className="item" />
  }
  
  renderSeparator = key => {
    return <Separator className="separator" key={ key } />
  }
}

react-join-children.js

export default function (children, render, renderSeparator) {
  return children.reduce((result, child, index) => {
    if (index < children.length - 1) {
      return result.concat([render(child, index), renderSeparator(index + '-separator')])
    }

    return result.concat(render(child, index))
  }, [])
}

Hi, I have read your blog, Its Amazing do you have a dummy project with react integration I want to look at its features and process for the understanding of AEM, I am a beginner in AEM.

Any help will be appreciated

thanks