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


class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      todos:[1, 2, 3, 4],
      text: '',
    }
  }

  onTextChange(e) {
    const value = e.target.value;

    this.setState({
      text: value,
    });
  }
  onClickButton() {
    const todos = this.state.todos
    todos.push(this.state.text)
    this.setState({
      todos: todos.slice()
    })
  }
  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2>
        </div>
        <p className="App-intro">
            <div className="to-do-list">
              <h2>TO DO</h2>
              <input type="text" onChange={(e) => this.onTextChange(e)} />
              <button onClick={() => this.onClickButton()} >click me</button>
              <ul>
                {
                  this.state.todos.map(e => (
                    <li>{e}</li>
                  ))
                }
              </ul>
            </div>
        </p>
      </div>
    );
  }
}

export default App;