Skip to content

Instantly share code, notes, and snippets.

@timscott
Forked from coryhouse/bindingInRender.js
Last active July 5, 2017 14:50
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save timscott/b4b13e450f98e47d3c4e246f27f13dfb to your computer and use it in GitHub Desktop.
Save timscott/b4b13e450f98e47d3c4e246f27f13dfb to your computer and use it in GitHub Desktop.
Example of binding in render to pass relevant data to a click handler.
import React from 'react';
class App extends React.Component {
constructor() {
this.state = {
users: [
{ id: 1, name: 'Cory' },
{ id: 2, name: 'Meg' }
]
};
}
deleteUser = user => {
this.setState(prevState => {
return { users: prevState.users.filter( u => u.id !== user.id)}
})
}
render() {
return (
<div>
<h1>Users</h1>
<ul>
{
this.state.users.map( user => {
return (
<li>
<input
type="button"
value="Delete"
onClick={this.deleteUser}
/>
{user.name}
</li>
)
})
}
</ul>
</div>
);
}
}
export default App;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment