Rendering 20 buttons with indexes

render-buttons.js

const renderComponent = (component, parentNode, method = 'append') => {
    if (method === 'append') {
        parentNode.appendChild(component.element)
    } else {
        // To be implemented
    }
    if (component.props.onClick) {
        component.element.addEventListener('click', component.props.onClick)
    }
    if (component.props.onFocus) {
        /// To be implemented
    }
}

const Button = (props) => {
    const element = document.createElement('button')
    element.type = props.type || 'button'
    element.textContent = props.text || ''
    return {
        element,
        props
    }
}

const buttonCount = 20
;[...new Array(20).keys()].forEach(index => {
    const buttonNumber = index + 1
    const buttonComponent = Button({
        text: buttonNumber,
        onClick: () => alert(buttonNumber)
    })
    renderComponent(buttonComponent, container)
})