SuggestedHistoryComponentApi.tsx

interface TableProps {
    historyItems: HistoryItem[];
}

interface TableState {
    activeItems: boolean[]
}

export class HistoryTable extends Component<TableProps, TableState> {
    state = {
        activeItems: this.getDeactivatedArray()
    }

    componentWillReceiveProps(nextProps) {
        if (nextProps.historyItems !== this.props.historyItems) {
            this.setState({ activeItems: this.getDeactivatedArray() })
        }
    }

    render() {
        const { historyItems } = this.props;

        const itemEls = historyItems.map((item, i) => {
            <li key={item.id}>
                <HistoryItem item={item} onActivateChange={() => this.handleItemActivate(i)} />
            </li>
        });

        return (
            <ul>
                {itemEls}
            </ul>
        );
    }

    private handleItemActivate = (index: number) => {
        this.setState(prevState => {
            const activeItems = prevState.activeItems;
            return { 
                activeItems: activeItems.map(
                    (isActive, i) => index === i ? !isActive : isActive
                )
            };
        });
    }

    private getDeactivatedArray = () => {
        return this.props.historyItems.map(_ => false);
    }
}

interface ItemProps {
    onActivateChange: () => void;
    item: HistoryItem;
}

export function HistoryItem(props: ItemProps) {

}