import React from 'react';
 
 
const ListItem = ({ id, index, name, href }) => <a href={ href } onClick={ () => dataLayer.push({ index, id, name, href }) }>{ name }</a>
 
const List = ({ elements }) => elements.map(({ id, name, href }, index) => {
  return (
    <ListItem { ...{name, href, index, id} }/>
  );
});
 
export default List;

import React from 'react';
 
import { Tracking, provideAnalytics } from 'react-datalayer';
 
const ListItem = ({ onClick, name, href }) => <a href={ href } onClick={ onClick }>{ name }</a>
 
const List = ({ elements }) => elements
  .map(({ id, name, href }, index) => {
    return (
      <Tracking eventProperties={ () => ({ id, index, name, href }) }>
        {
          instrument => <ListItem onClick={ instrument('click') } { ...{ name, href } }/>
        }
      </Tracking>
    )
  });
 
export default provideAnalytics({ userId: 2 })(List);