# react list sample 001

class App extends React.Component {
  constructor(props) {
    super(props);
    
    this.state = {
      users: ['Akbar'],
      userName: ''
    }
    
    this.handlerClick = this.handlerClick.bind(this);
    this.handelInputUser = this.handelInputUser.bind(this);
  }
  
  handlerClick() {
    this.setState({
      users: [...this.state.users, this.state.userName],
      userName: ''
    })
  }
  
  handelInputUser(event) {
    this.setState({
      userName: event.target.value
    })
  } 
  
  render() {
    return (
     <div>
        <input value={this.state.userName} onChange={this.handelInputUser} />
        <br />
        <button onClick={this.handlerClick}>+ User</button>
        <br />
        <ul>
          {this.state.users.map(user => <li key={user}>{ user }</li>)}
        </ul>
     </div>
    )
  }
}

ReactDOM.render(<App />, document.querySelector("#mountNode"))