import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  state = {
    inputText: 'Hello World',
    listItem: [
      'List Pertama',
      'List Kedua',
      'List ketiga'
      ]
  }

  constructor(props) {
    super(props)

    this.onChange = this.onChange.bind(this)
  }

  onChange(event) {
    this.setState({
      inputText: event.target.value
    })
  }

  render() {
    return (
      <div>
        <h1>{this.state.inputText}</h1>
        <input
          type="text"
          placeholder="Input nama"
          value={this.state.inputText}
          onChange={this.onChange}  />
          <ul>
          {
            this.state.listItem.map((item,index) =>(
              <li key={index}>{item}</li>
              ))
          }
          </ul>
      </div>
      );
  }
}

export default App;