import React, { Component } from "react";
import NumberItem from "./NumberItem";
export default class NumberList extends Component {
constructor(props) {
super(props);
this.state = { nums: [1, 2, 3, 4, 5] };
}
remove(num) {
this.setState(st => ({
nums: st.nums.filter(n => n !== num)
}));
}
render() {
let nums = this.state.nums.map(n => (
<NumberItem value={n} remove={() => this.remove(n)} />
));
return (
<div>
<h1>First Number List</h1>
<ul>{nums}</ul>
</div>
);
}
}
import React, { Component } from "react";
import NumberItem from "./NumberItem";
export default class NumberList extends Component {
constructor(props) {
super(props);
this.state = { nums: [1, 2, 3, 4, 5] };
}
remove(num) {
this.setState(st => ({
nums: st.nums.filter(n => n !== num)
}));
}
render() {
let nums = this.state.nums.map(n => (
<NumberItem value={n} remove={() => this.remove(n)} />
));
return (
<div>
<h1>First Number List</h1>
<ul>{nums}</ul>
</div>
);
}
}
import React, { Component } from "react";
import BetterNumberItem from "./BetterNumberItem";
export default class BetterNumberList extends Component {
constructor(props) {
super(props);
this.state = { nums: [1, 2, 3, 4, 5] };
this.remove = this.remove.bind(this);
}
remove(num) {
console.log("Removing");
console.log(num);
this.setState(st => ({
nums: st.nums.filter(n => n !== num)
}));
}
render() {
let nums = this.state.nums.map(n => (
<BetterNumberItem value={n} remove={this.remove} />
));
return (
<div>
<h1>First Number List</h1>
<ul>{nums}</ul>
</div>
);
}
}
import React, { Component } from "react";
export default class BetterNumberItem extends Component {
constructor(props) {
super(props);
this.handleRemove = this.handleRemove.bind(this);
}
handleRemove(evt) {
this.props.remove(this.props.value);
}
render() {
return (
<li>
{this.props.value}
<button onClick={this.handleRemove}>X</button>
</li>
);
}
}