# delete list

import React from 'react';

class DeleteValue extends React.Component{
    constructor(props){
        super(props);

        this.state = {
            userName:'',
            userLists:['jahan'],
        }
        this.changeValue = this.changeValue.bind(this);
        this.inputhandler = this.inputhandler.bind(this);
        this.deleteuser = this.deleteuser.bind(this);
    }

    inputhandler(event){
        this.setState({
            userName:event.target.value,
        })
    }
    changeValue(event){
        this.setState({
            userLists: [...this.state.userLists, this.state.userName],
            userName: '',
        })
    }
    deleteuser(deleteIndex){
        const newUsers = this.state.userLists.filter((user, index) => index !== deleteIndex)
        this.setState({
          userLists: newUsers
        })
    }
    render(){
        return <div className="wrapper">
            <input type="" value={this.state.userName} onChange={this.inputhandler}/>
            <button type="submit" onClick={this.changeValue}>Add user</button>
            <div>
            <ul>
                {this.state.userLists.map((user, userIndex) => (
                  <li key={userIndex}>
                    { user }
                    <button type="submit" onClick={() => this.deleteuser(userIndex)}>Delete user</button>
                  </li>
                ))} 
            </ul>  
            </div>
        </div>
    }
}

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