# child and parent event

import React from 'react';

class List extends React.Component {
  constructor(props){
    super(props);
  }
  
  render() {
    return (
      <li>
        {this.props.mytext} - {this.props.mynumber}
        <br />
        <button onClick={() => this.props.listClick(index)}>Change</button>
      </li>
    );
  }
}


class DeleteValue extends React.Component{
    constructor(props){
        super(props);
      
      this.state = {
        user: "myuser",
        index: 1
      }
      
      this.changeNumber = this.changeNumber.bind(this);
    }
  
     changeNumber() {
       this.setState({
         index: (Math.random() * 1000).toFixed()
       })
     }

    render(){
        return <div className="wrapper">
            <ul>
              <List mytext={this.state.user} mynumber={this.state.index} listClick={this.changeNumber} />
            </ul>
        </div>
    }
}

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