<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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/react/18.0.0/umd/react.production.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.0.0/umd/react-dom.production.min.js