score:9
you're executing the function instead of just setting it, here:
onclick={this.dlthandler(index)}
if you want to pass some arguments bind them. like:
onclick={this.dlthandler.bind(this, index)}
or use an arrow function:
onclick={() => this.dlthandler(index)}
if you notice, we're setting a function while declaring it to onclick
. and this function is just executing dlthandler
.
score:2
when you define the onclick
like this it is calling that function on instantiation. you need to use bind
or define an anonymous function:
<button onclick={this.dlthandler.bind(this, index)}>delete</button>
or
<button onclick={() => this.dlthandler(index)}>delete</button>
both of these pass a function to the onclick
handler - but they do not execute until onclick
is fired. note that doing this will cause a new function to be generated on every render call. this can be expensive computationally if you are rendering very often.
if performance becomes an issue it is a better solution to refactor the button into a separate component that has a defined dlthandler
function.
Source: stackoverflow.com
Related Query
- onClick event fired before clicking in react
- React onClick event working on twice clicks when clicking again
- React onClick event triggered clicking the child element
- Clicking on a div that contains span, doesn't trigger onclick event - React
- Inner button onClick event not being fired with React
- React onClick - pass event with parameter
- React JS onClick event handler
- How to use onClick event on react Link component?
- React passing parameter via onclick event using ES6 syntax
- React onClick event on component
- Get object data and target element from onClick event in react js
- React - how to capture only parent's onClick event and not children
- React - ul with onBlur event is preventing onClick from firing on li
- Add onClick event to a group element (svg) with react
- React onClick event
- React onClick and onTouchStart fired simultaneously
- Why does a react onClick event append a question mark to my url?
- React and jQuery event handler's fired in wrong order
- React onClick event not firing when function is passed to child
- React onClick event handler not working using Next.js
- onMouseDown event in react does not trigger state changes but onClick does
- React: How to add onChange functionality inside of Function component using React Hooks? Need onClick event from a checkbox to influence input state
- React / span with onClick event not in tag
- React - how to trigger preventDefault() before the synthetic event is recycled?
- Creating a Custom Button in React Typescript and add onClick Event
- React component only changes state on second onClick event
- how to use react devtools to get function tied to an onClick event listener
- React plot options onclick event
- Open popup page on onClick event of component react
- React onClick event for multiple divs
More Query from same tag
- Best way to group an array with property of object and how to render the result
- How to change react-dates input css
- Unable to render filtered array values in react UI
- changing a text with my switch component toggle
- Rewrtie some code from jQuery to JS (ReactJS)
- 'TypeError: Cannot read property 'incorrect' of undefined' but console.log shows there is nothing that is undefined
- How to run more than one function synchronously in react js
- How can I slide this React drawer from left to right
- Can only update a mounted or mounting component. findless error
- How can I use checkbox form in react?
- React: Children onclick to change parent's state for re-rendering
- How to use one useMemo using react?
- Dynamically load javascript chunk with webpack and react router
- React.js and D3, adding arrows to forced directed graphs
- Drag and drop not working using Highcharts-React
- React + Redux Noob - Submitting Form Data
- Infinite Loop caused when trying to fetch data and render it with React
- css fontawesome icon align with two text line inside a button ReactJS
- Pass a large object of element attribute props to component
- React Web// iOS like select dropdown on mobile
- React Leaflet -- button on map assistance
- setState() of an object within an object with a variable
- VerticalTimeline: change text color of first element
- Having issues displaying react app on nginx server at domain
- In React hooks, how do I refer to a generic attribute of an object in my state I want to change?
- How to type custom widget for Algolia React instant search?
- Logic to render a component only once
- How to use static js generated throught webpack for react app with es6
- Issue with Apollo Client cache on a react app
- Pass an object value in props to another component