Converting code from using .bind(this) to arrow functions

I have recently been informed that it is not good to use bind(this) in the render function because it creates brand new functions every time. I am therefore moving towards using arrow functions as you see below in the two <button> elements.

The question I have is about the map function. It is also using .bind(this). Is there a way to convert this to an ES6/7 format?

return (
    <div>
        <button onClick={()=>this.changeDisplayType("images")}>Images</button>
        <button onClick={()=>this.changeDisplayType("audio")}>Audio</button>
        {
            resources.map(function(resource) {
                return (
                    <div key={resource.id}>
                        <div style={{fontWeight: "bold"}}>{resource.name}</div>
                        <div>({resource.info})</div>
                    </div>
                )
            }.bind(this))
        }


    </div>
)

I also just realized that I can remove the .bind(this) completely and my code still works. Therefore I am also wondering what difference it makes if its there or not.