score:0
generally you would make use of inline arrow functions when you need to bind he handler to the context or to provide custom parameters
in
<char click={()=>this.ondeletehandler(index)}/>
ondeletehandler
is bound to the context where char
is rendered and is passed a custom parameter index
. since a new function is returned to click
, it can be executed from within char
like this.props.click()
<char click={this.ondeletehandler()}/>
here the ondeletehandler
is evaluated and the value is returned to the click
prop
<person click={changed={(event) => this.namechangedhandler(event, person.id)} />
here the syntax is invalid, it should probably be
<person changed={(event) => this.namechangedhandler(event, person.id)} />
in which case, it takes the default parameter and pass it along with the custom parameter to namechangedhandler
and it also performs binding
<char click={this.ondeletehandler}/>
just assigns the reference of ondeletehandler
to click
and whenever you invoke click
, ondeletehandler
will be called with the parameters that you pass while invoking click and the context within ondeletehandler
will refer to the context from where it is invoked unless you bind ondeletehandler
using arrow function or in constructor
score:1
the whole question seems to boil down to what the difference between func
and func()
and () => func()
is. it has nothing to do specifically with react.
if i have a function
function func() {
console.log(42);
}
then i can reference the function object itself via func
. this is useful if i need to pass the function to another function, e.g. settimeout
:
settimeout(func, 1000); // calls func after 1000ms
settimeout
expects a function that it can call after the provided timeout.
similarly in react, click
, change
etc are all props that expect to be passed a function that is called when the event happens.
func()
on the other hand calls the function. this needs to be done if you actually need to call function right then and there.
this implies that if i do
settimeout(func(), 1000);
then i would call func
first and pass its return value to settimeout
(i.e. i call func
now, settimeout
doesn't call it later). so this is usually incorrect unless func
returns a function itself and its really the return value i want to pass to the other function.
() => func()
is just a new function that only calls func
. for all intends and purposes it is equivalent to func
:
function func() {
console.log(42);
}
const anotherfunc = () => func();
func();
anotherfunc();
and of course if func
expects an argument then i have to pass it along when wrapping it in another function, which is what x => func(x)
does.
the other part is how functions assigned to object properties and this
work. in short, what this
refers to inside a (non-arrow) function depends on how the function is called. doing
this.foo();
// or
var bar = this.foo;
bar();
produces two different results because this.foo()
and bar()
are two different ways to call the function. for more info see how to access the correct `this` inside a callback?
score:7
<char click={()=>this.ondeletehandler(index)}/>
it passes anonymous function as a callback which - when clicked - triggers ondeletehandler
with extra index
parameter (which has to be defined in the scope before).
<char click={this.ondeletehandler()}/>
it passes result of ondeletehandler()
as a callback - probably a bad idea - ondeletehandler
function has to return another function that will be invoked on click.
<person click={changed={(event) => this.namechangedhandler(event, person.id)} />
looks invalid - will result with syntax error.
<char click={this.ondeletehandler}/>
similar to the first example but doesn't take custom parameters. default click event will be passed as a first argument for ondeletehandler
Source: stackoverflow.com
Related Query
- When to use inline function on button onClick event - Javascript/React.js
- Should one use const when declaring an arrow function in React class
- Error when trying to use function that returns a function that returns a HOC (a la Redux Connect)
- How to use React.FC<props> type when the children can either be a React node or a function
- Lodash 'get' not working when use in a Arrow Function (React)
- When to use arrow function
- ESLint throws an "is missing in props validation" error when use destructuring in function parameter
- when to use function() , function or () => function(callback)
- When should we use anonymous function in event listener in react?
- Use of bind when calling a function on onClick Event
- ReactJS when Fetch POST, and use then function to setState
- Use click handler to change color of button when there are multiple buttons using the same function
- Getting Uncaught TypeError: Cannot call a class as a function when I use a React HOC
- Yup validation not work when use not(!) in matches function
- React throws an error "Can't assign to property" scrollLeft "on 1: not an object" When trying use ref in custom function
- How do I use redux when a prop function is changing the state?
- How to use this.state in my filter function when render component?
- How to use event.preventDefault() when function have arguments
- Getting TypeError: _react.default.memo is not a function only when I use FavoriteIcon in my app
- When setting state with React's use state hook using it's prev (or initial) value throws an error Type Error 0 is not a function
- Page reloads when I use the setState function in React.js
- Data from API call are stored in a Array but when i try to use that array in a function for further use it shows that array is empty . why?
- Trying to use mock function when testing React component
- When to use HOC. When to use Function as child
- when I have multiple use effects which useeffect cleanup function will be called
- When switching the category using the drop down menu the quantity display goes to NaN and cant use increase/decrease function ReactJs
- How to use callback function in React hooks when value is submitted?
- React when to use a Function in Props?
- JS, use of Async Await function in Axios when mapping over an array
- Filter function does not work when I use Redux
More Query from same tag
- Toggle columns on react-bootstrap-table2
- How to show dialog after successfull API call in react?
- How to type useState for files?
- req.file is undefined when uploading image from front end
- React Spring - useTrail delay issues
- My firebase query call isn't getting my document even though it exists
- React stateless component this.refs..value?
- Redux CombineReducers returns defaultState after every action that is dispatched
- Material UI autocomplete not being recognized
- Dodge theme from certain NodeJS modules in ReactJS
- Avoid inline styling - Mui V5
- Click event inside of a Modal - test
- How to get key value based on array name?
- How to call separate code for every single prop in useEffect
- Add Form Fields Dynamically -- ReactJs
- how to avoid nested document's property assignment that results in undefined
- JSON Error when create react app
- React: "this" is undefined inside a component function
- Preloading with React.lazy
- React hooks equivalent of componentDidCatch?
- React Router params returning empty object
- What does bind(this) in constructor do in ReactJS
- How to click the card and while clicking the next button it will redirect based on selected card?
- Jest test handleDropdownChange
- Condition state clear on componentDidMount
- Validation React
- How can I obtain an image link that is in the body of my GET request using React.js?
- return to current page in pagination using react
- images always getting smaller
- Upgrading to create-react-app version 4.0 with react-app-rewired: server start error