React

by ockhamsblade

HTML

<div id="app"></div>

CSS

body {
  background: #EEE;
  padding: 20px;
  font-family: Helvetica;
}

li {
  font-size: 10px
}

React

let myArray = [1,2,3,4,5,6];

class List extends React.Component {

  constructor() {
    super()
    this.state = {
      list: []
    };
  }
	
  componentDidMount() {
  	this.setState({list:myArray});
  }
	render() {
  	return (
    <div>
      <h1>My list</h1>
    	<ul>
        {
        	this.state.list.map((item, index) => (
          	<Item key={index} value={item} onDeleteItem={this.handleDelete}>Item {item}</Item>
          ))
    		}
    	  </ul>
    </div>
    )
  }
  
  handleDelete = (value) => {
    console.log("Original list: ", this.state.list);
  	console.log("Handling delete of item " + value);
  	let newState = {...this.state};
    newState.list = newState.list.filter((v) => v !== value);
    console.log("New list: ", newState.list);
  	this.setState(newState);
  }
}

class Item extends React.Component {
	render() {
  return (<li><button type="button" onClick={this.delete}>Item {this.props.value}</button></li>);
  }
  
  delete = () => {
  	console.log('Please remove item ' + this.props.value);
  	this.props.onDeleteItem(this.props.value);
  }
  
  componentWillUnmount() {
  	console.log("Unmounting item " + this.props.value);
  }
}

ReactDOM.render(<List />, document.querySelector("#app"))