score:81
Accepted answer
the es6 way:
using arrow functions =>
const items = this.props.items.map((item) => (
<ul key={item.id}>
<li>
<button onclick={() => this.displayalert(item.email)}>
{item.lastname + ', ' + item.firstname}
</button>
</li>
</ul>
));
onclick
the anonymous function is called and executes this.displayalert(item.email)
the es5 way:
you could do this using .bind
and passing the parameter in there.
you should also pass this
or use bind to keep the proper context on your .map
function:
var items = this.props.items.map(function(item) {
return (
<ul key={item.id}>
<li>
<button onclick={this.displayalert.bind(this, item.email)}>
{item.lastname + ', ' + item.firstname}
</button>
</li>
</ul>
);
}, this);
shown in the example here: react - communicate between components
score:4
using arrow function and babel plugin "transform-class-properties"
class people extends react.component {
render() {
return (
<ul>
{ this.props.items.map( (item) => (
<li key={item.id}>
<button onclick={this.displayalert(item)}>
{item.lastname + ', ' + item.firstname}
</button>
</li>
))}
</ul>
)
}
displayalert = (item) => (event) => {
// you can access the item object and the event object
alert('hi');
}
}
Source: stackoverflow.com
Related Query
- How to pass arguments to functions in React js?
- How to add arguments to event handler in ES6 React when functions are bound in constructor
- How to pass arguments to callback in React + Typescript without new function creation?
- How to pass arguments to function in functional component in React
- How to pass two functions to onClick event in react
- How to avoid using inline functions in React (ES6) for functions that take arguments
- How to pass handlSubmit and handleChange functions from Parent to Child in React
- How to pass parameters in react functions with Typescript
- How to pass cli arguments to react craco?
- How to pass a function with arguments as prop in React without creating an arrow function
- How can I pass arguments in action different 3 level react components without redux and context API?
- React - How to properly pass and invoke functions that accepts parameters to a component
- Warning: Functions are not valid as a React child. or how to pass the id into element in Route tag
- How can I pass arguments to a bound function to a React child?
- React Best Practices: If we can't use arrow functions in JSX onChange( ), how can we pass in custom arguments?
- How to pass down functions as a prop with the new React Hooks
- How to pass functions as props to React Custom Modal?
- React and TypeScript: How to pass Arguments to Event handler of type: MouseEventHandler
- How to pass props from async functions triggered by an OnClick event to a component React js
- React How to pass arguments to function
- how to pass functions through React components
- How to pass multiple arguments through React Context (from Consumer to Provider)?
- How to pass json data from one component to another using functions in react
- How can I pass in the arguments to a function in react from within the html?
- How to pass in a react component into another react component to transclude the first component's content?
- How to create helper file full of functions in react native?
- React - How to pass HTML tags in props?
- React - how to pass state to another component
- How to pass all other props to react class?
- React - How to pass props to a component passed as prop
More Query from same tag
- React render multiple data based on conditional array
- ES6 modules - imported constants undefined if not in React component
- Using react-js-pagination for pagination but bootstrap style not getting applied
- React linter airbnb proptypes array
- How to I consume nested data structures returned from Redux without running into errors such as 'cannot access property x of undefined'?
- Expect mocked library function to have been called
- TypeError: webpack.optimize.DedupePlugin is not a constructor
- CSS: How can I make a percentage bar in the background of a td in a table
- How to track mouse clicked between linestring openlayer 6
- React js lodash set the state changes but the state is not updated
- Manage current user using context and custom hooks in React
- Is there any instruction to migrate from redux-form to react-final-form?
- React.js: How to set default value in Select option?
- map function not working in React
- React: .map is not a function
- React component not rendered when sub path is called directly
- Anchor navigation using the <a> tag inside a react component
- React router not displayed a component
- How to send input value from a form to another component?
- window is not defined ( webpack and reactJS )
- React component not re-rendering to grab Firebase data
- React change className in x second if a specific className is active
- Hide and show the content of sibling elements on single click among them in ReactJS
- React Leaflet Polygons not updating with properties
- Change in state not being rendered with object.map
- How to access current state on Redux Toolkit on createAsyncThunk
- How can i re-render parent onClick in a child component [ using react-hooks ]?
- React update parent component state doesn't re-render children components
- ReactJS Material-UI how to fix a component on top of an anchored menu
- How do I exclude url's from service worker scope in create react app, without having to eject?