import React from 'react'

class Counter extends React.Component {
  // 定义组件状态
  state = {
    count: 0,
    list: ['one', 'two', 'three'],
    person: {
      name: 'Ken',
      age: 20,
    },
  }

  clickHandler = () => {
    this.setState({
      count: this.state.count + 1,
      // // 数组修改,添加数组元素
      // list: [...this.state.list, 'four', 'five'],
      // // 对象修改
      // person: { ...this.state.person, name: 'King' }

      // 删除 - filter
      list: this.state.list.filter((item) => item !== 'two'),

      person: { ...this.state.person, age: '' },
    })
  }

  render() {
    return (
      <>
        <ul>
          {this.state.list.map((item) => (
            <li key={item}>{item}</li>
          ))}
        </ul>
        <div>
          {this.state.person.name} {this.state.person.age}岁
        </div>
        <div>
          <button onClick={this.clickHandler}>{this.state.count}次</button>
        </div>
      </>
    )
  }
}

function App() {
  return <Counter></Counter>
}

export default App