List and ListItem Preact

index.tsx

import { Component, h } from 'preact';

import ListItem from '../list-item';

export default class List extends Component<{}, { indices: number[] }> {

  state = { indices: [0, 1, 2, 3]  };

  public render() {
    return (
      <div class="sde-list">
        { this.state.indices.map(index => (
          <ListItem onAction={this.do} key={index} index={index} />))}
      </div>
    );
  }

  private do = (action: string, index: number) => {
    if (action === 'right') {
      console.log('Item removed (right): ' + index);
    } else {
      console.log('Item removed (left): ' + index);
    } 
    let indices = this.state.indices;
    indices.splice(index, 1);
    this.setState({ indices });
  }
}