Here is a simple example that showing the plumbing for a ReactJS app using a callback.
import React from 'react'; import { render } from 'react-dom'; class User extends React.PureComponent { render() { const {name, onDeleteClick } = this.props console.log(`${name} just rendered`); return ( <li> <input type="button" value="Delete" onClick={onDeleteClick} /> {name} </li> ); } } class App extends React.Component { constructor(props) { super(props); this.state = { users: [ { id: 1, name: 'Cory' }, { id: 2, name: 'Meg' }, { id: 3, name: 'Bob' } ] }; } 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 <User key={user.id} name={user.name} onDeleteClick={() => this.deleteUser(user.id)} /> }) } </ul> </div> ); } } export default App; render(<App />, document.getElementById('root'));
10 key differences between ReactJS and React-Native? – Georgia Hovis
Dec 26, 2017 @ 11:31:35