title: Why shouldn't JSX props use arrow functions or bind?
body: <p>I'm running lint with my React app, and I receive this error:</p>
  
  <pre><code>error    JSX props should not use arrow functions        react/jsx-no-bind
  </code></pre>
  
  <p>And this is where I'm running the arrow function (inside <code>onClick</code>):</p>
  
  <pre><code>{this.state.photos.map(tile =&gt; (
    &lt;span key={tile.img}&gt;
      &lt;Checkbox
        defaultChecked={tile.checked}
        onCheck={() =&gt; this.selectPicture(tile)}
        style={{position: 'absolute', zIndex: 99, padding: 5, backgroundColor: 'rgba(255, 255, 255, 0.72)'}}
      /&gt;
      &lt;GridTile
        title={tile.title}
        subtitle={&lt;span&gt;by &lt;b&gt;{tile.author}&lt;/b&gt;&lt;/span&gt;}
        actionIcon={&lt;IconButton onClick={() =&gt; this.handleDelete(tile)}&gt;&lt;Delete color="white"/&gt;&lt;/IconButton&gt;}
      &gt;
        &lt;img onClick={() =&gt; this.handleOpen(tile.img)} src={tile.img} style={{cursor: 'pointer'}}/&gt;
      &lt;/GridTile&gt;
    &lt;/span&gt;
  ))}
  </code></pre>
  
  <p>Is this a bad practice that should be avoided? And what's the best way to do it?</p>