Make Unique Id by props in React (With Redux)

Frame.js

/**
 *
 * Frame Redux Container
 *
 */

import React from 'react'
import { connect } from 'react-redux'
import { createStructuredSelector } from 'reselect'
import { selectName, selectFormOpened } from './selectors'
import { updateOpenForm } from './actions'
import { compose, withHandlers, mapProps } from 'recompose'

import { log } from 'ruucm-util'
import { uniqueId } from 'lodash'

const Frame = props => {
  let uuid = getUuid(props)
  return (
    <div style={props.style}>
      <h1>{props.frame_id}</h1>
      {React.Children.map(props.children, child =>
        React.cloneElement(child, {
          // animStarted: props.animStarted,
          animStarted: props[uuid + '_animStarted']
            ? props[uuid + '_animStarted']
            : false,
          startAnim: props.startAnim,
        })
      )}
    </div>
  )
}

const getUuid = props => {
  return props.frame_id
}

// Component redux
const mapStateToProps = (state, ownProps) => {
  log('props(mapStateToProps)', ownProps)
  let uuid = getUuid(ownProps)
  // Make Unique State Name
  var key = uuid + '_animStarted'
  var obj = { name: selectName() }
  obj[key] = selectFormOpened(uuid)
  return createStructuredSelector(obj)
}
function mapDispatchToProps(dispatch) {
  return {
    dispatch,
  }
}

// Component enhancer
const enhance = compose(
  mapProps(({ children, ...rest }) => {
    return {
      frame_id: uniqueId('frame_'),
      children: children,
      ...rest,
    }
  })
)
export default enhance(
  connect(
    mapStateToProps,
    mapDispatchToProps
  )(
    withHandlers({
      startAnim: props => data => {
        const { dispatch, name } = props
        let uuid = getUuid(props)
        dispatch(updateOpenForm(uuid, data))
      },
    })(Frame)
  )
)