How to avoid bind or inline arrow functions inside render method

by

First: A simple solution will be to create a component for the content inside a map function and pass the values as props and when you call the function from the child component you can pass the value to the function passed down as props.

Parent

deleteTodo = (val) => {
    console.log(val)
}
todos.map(el => 
    <MyComponent val={el} onClick={this.deleteTodo}/> 

)

MyComponent

class MyComponent extends React.Component {
    deleteTodo = () => {
        this.props.onClick(this.props.val);
    }
    render() {
       return <div  onClick={this.deleteTodo}> {this.props.val} </div>
    }
}

Sample snippet

class Parent extends React.Component {
     _deleteTodo = (val) => {
        console.log(val)
    }
    render() {
        var todos = ['a', 'b', 'c'];
        return (
           <div>{todos.map(el => 
             <MyComponent key={el} val={el} onClick={this._deleteTodo}/> 
        
           )}</div>
        )
    }
    
   
}

class MyComponent extends React.Component {
        _deleteTodo = () => {
                     console.log('here');   this.props.onClick(this.props.val);
        }
        render() {
           return <div onClick={this._deleteTodo}> {this.props.val} </div>
        }
    }
    
ReactDOM.render(<Parent/>, document.getElementById('app'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

EDIT:

Second: The other approach to it would be to use memoize and return a function

constructor() {
    super();
    this._deleteTodoListener = _.memoize(
                   this._deleteTodo, (element) => {
                        return element.hashCode();
                    }
              )
}

_deleteTodo = (element) => {
   //delete handling here
}

and using it like

todos.map(el => <div key={el} onClick={this._deleteTodoListener(el)}> {el} </div>)

P.S. However this is not a best solution and will still result in
multiple functions being created but is still an improvement over the
initial case.

Third: However a more appropriate solution to this will be to add an attribute to the topmost div and get the value from event like

_deleteTodo = (e) => {
     console.log(e.currentTarget.getAttribute('data-value'));

 }

 todos.map(el => <div key={el} data-value={el} onClick={this._deleteTodo}> {el} </div>)

However, in this case the attributes are converted to string using toString method and hence and object will be converted to [Object Object] and and array like ["1" , "2", "3"] as "1, 2, 3"

More Related Contents:

  1. Correct use of arrow functions in React
  2. What do multiple arrow functions mean in JavaScript?
  3. How to use arrow functions (public class fields) as class methods?
  4. Arrow function without curly braces
  5. Why shouldn’t JSX props use arrow functions or bind?
  6. What are the differences (if any) between ES6 arrow functions and functions bound with Function.prototype.bind?
  7. Arrow vs classic method in ES6 class
  8. What is the difference between using constructor vs state = {} to declare state in react component?
  9. Can I use arrow function in constructor of a react component?
  10. Binding vs Arrow-function (in JavaScript, or for react onClick)
  11. ES6 functions, arrow functions and ‘this’ in an ES6 class [duplicate]
  12. Should we use useCallback in every function handler in React Functional Components
  13. Performance penalty of creating handlers on every render with react-hooks
  14. setState doesn’t update the state immediately
  15. Invariant Violation: Objects are not valid as a React child
  16. How to update single value inside specific array item in redux
  17. componentDidMount equivalent on a React function/Hooks component?
  18. How do I update states `onChange` in an array of object in React Hooks
  19. Embedding SVG into ReactJS
  20. setTimeout for this.state vs useState
  21. How can I disable all typescript type checking?
  22. React code throwing “TypeError: this.props.data.map is not a function”
  23. Why need useRef and not mutable variable?
  24. How to force a functional React component to render?
  25. Using a Set data structure in React’s state
  26. React hook useEffect runs continuously forever/infinite loop
  27. Is it possible to export Arrow functions in ES6/7?
  28. Dynamically Rendering a React component
  29. Could not find “store” in either the context or props of “Connect(App)”
  30. Function inside functional component in React hooks – Performance

Leave a Comment