/**
 * Copyright (c) Meta Platforms, Inc. and affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * @flow
 */

import * as React from 'react';

export default function App(): React.Node {
  return <List />;
}

class List extends React.Component {
  constructor(props: any) {
    super(props);
    this.state = {
      items: ['one', 'two', 'three'],
    };
  }

  addItem = () => {
    if (this.inputRef && this.inputRef.value) {
      this.setState({items: [...this.state.items, this.inputRef.value]});
      this.inputRef.value = '';
    }
  };

  render(): any {
    return (
      <div>
        <input
          data-testname="AddItemInput"
          value={this.state.text}
          onChange={this.onInputChange}
          ref={c => (this.inputRef = c)}
        />
        <button data-testname="AddItemButton" onClick={this.addItem}>
          Add Item
        </button>
        <ul data-testname="List">
          {this.state.items.map((label, index) => (
            <ListItem key={index} label={label} />
          ))}
        </ul>
      </div>
    );
  }
}

// $FlowFixMe[missing-local-annot]
function ListItem({label}) {
  return <li data-testname="ListItem">{label}</li>;
}