Skip to content

Instantly share code, notes, and snippets.

@coryhouse
Last active July 5, 2017 15:00
Show Gist options
  • Save coryhouse/01339ce21024cfd7f5cd4c64d1fd26c4 to your computer and use it in GitHub Desktop.
Save coryhouse/01339ce21024cfd7f5cd4c64d1fd26c4 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 = id => {
this.setState(prevState => {
return { users: prevState.users.filter( user => user.id !== id)}
})
}
render() {
return (
<div>
<h1>Users</h1>
<ul>
{
this.state.users.map( user => {
return (
<li key={user.id}>
<input
type="button"
value="Delete"
onClick={() => this.deleteUser(user.id)}
/>
{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