<div id="react-root"></div>
class Item extends React.Component {
render() {
const { value, onRemove } = this.props;
return (
<li>
<a href="#" onClick={onRemove(value)}>{value}</a>
</li>
);
}
}
class List extends React.Component {
constructor(props) {
super(props);
const { items } = this.props;
this.state = { items };
}
handleRemove = (value) => (e) => {
e.preventDefault();
const newItems = this.state.items.filter(item => item !== value);
this.setState({ items: newItems });
};
render() {
const { items } = this.state;
return (
<ul>
{items.map(i =>
<Item key={i} onRemove={this.handleRemove} value={i} />
)}
</ul>
);
}
}
const mountNode = document.getElementById('react-root');
const root = ReactDOM.createRoot(mountNode);
root.render(<List items={[1, 2, 3, 4, 5]} />);
View Compiled
This Pen doesn't use any external CSS resources.