Reactjs app div onclick 在 IE 11 中不工作没有 function 被调用

Question

I am working a project with reactJS as the main framework and using latest react hooks. I am having a const function need to execute on a div item (child-component) on the left side, which consists of simple head and some padding kind of box.

here is my code Function will get called in parent component

    import React from 'react'
    import PropTypes from 'prop-types'
    import classnames from 'classnames'
    import withStyles from 'react-jss'
    import * as R from 'ramda'
    import { connect } from 'react-redux'
    import CardItem from './card-item'

    const ParentComponent = ({
      classes
    }) => {
    const arrayData = [{name: "Jose", id: "1"}, {name: "Job", id: "2"}];
    const onSelect = (data) => () => {
        console.log(data)
    }

    return (<div> 
    {Array.map(item => 
     <CardItem 
      item={item}
      onclickFun={onSelect(item)}
     />,(arrayData))}
     </div>
     )
    }

    ParentComponent.propTypes = {
      classes: PropTypes.object
    }

    const styles = theme => ({
      card: {
        boxSizing: 'border-box',
        minHeight: '150px',
        width: '100%',
        borderStyle: 'solid',
        borderWidth: '1px',
      }

    })

    export default (withStyles(styles)(ParentComponent))

The card Component code:

            import React from 'react'
            import PropTypes from 'prop-types'
            import classnames from 'classnames'
            import withStyles from 'react-jss'
            import * as R from 'ramda'
            import { connect } from 'react-redux'

            const CardItem = ({
              classes,
              item,
              onclickFun
            }) => {
              return (
                <div className=[classes.card} onClick={onclickFun}>
                  <div className={classes.topContainer}>
                    {item.name}
                  </div>
                </div>
              )
            }

            CardItem.propTypes = {
              classes: PropTypes.object,
              item: PropTypes.object,
              onClick: PropTypes.func
            }

            const styles = theme => ({
              card: {
                boxSizing: 'border-box',
                minHeight: '150px',
                width: '100%',
                borderStyle: 'solid',
                borderWidth: '1px',
              }

            })

            export default (withStyles(styles)(CardItem))

Please help

Answer 1

You have an extra => () in your onSelect function

Replace

const onSelect = (data) => () => {
    console.log(data)
}

With

const onSelect = (data) => {
    console.log(data)
}

Also when adding as prop to the cardItem you're calling the function as apposed to passing the actual function like so

    onclickFun={() => {onSelect(item)}}

Replace

 <CardItem 
   item={item}
   onclickFun={onSelect(item)}
 />

With

 <CardItem 
    item={item}
    onclickFun={() => {onSelect(item)}}
 />

One more thing Array.map should be called on the array directly like so

{arrayData.map(item => 
 <CardItem 
  item={item}
  onclickFun={onSelect(item)}
 />)}

I created a working sandbox (I removed all styles to simplify it) Code sandbox