Por que os acessórios JSX não deveriam usar funções de seta ou vincular?

Estou executando o fiapo com meu aplicativo React e recebo este erro:

error    JSX props should not use arrow functions        react/jsx-no-bind

E é aqui que estou executando a função de seta (dentroonClick):

{this.state.photos.map(tile => (
  <span key={tile.img}>
    <Checkbox
      defaultChecked={tile.checked}
      onCheck={() => this.selectPicture(tile)}
      style={{position: 'absolute', zIndex: 99, padding: 5, backgroundColor: 'rgba(255, 255, 255, 0.72)'}}
    />
    <GridTile
      title={tile.title}
      subtitle={<span>by <b>{tile.author}</b></span>}
      actionIcon={<IconButton onClick={() => this.handleDelete(tile)}><Delete color="white"/></IconButton>}
    >
      <img onClick={() => this.handleOpen(tile.img)} src={tile.img} style={{cursor: 'pointer'}}/>
    </GridTile>
  </span>
))}

Esta é uma prática ruim que deve ser evitada? E qual é a melhor maneira de fazer isso?

questionAnswers(5)

yourAnswerToTheQuestion