import?React?from?'react';

class?TodoList?extends?React.Component?{

????constructor(props){
????????super(props);
????????this.state={
????????????list:[],
????????????inputValue:''
????????}
????}

????handleBtnClick(){
????????this.setState({
????????????list:[...this.state.list,this.state.inputVlue],
????????????inputVlue:?''
????????})
????}
????handleInputChange(e){
????????this.setState({
????????????inputVlue:e.target.value
????????})
????}

????render(){
????????return?(
????????????//jsx?語法
????????????<div>
????????????????<div>
????????????????????<input?value={this.state.inputValue}?onChange={this.handleInputChange.bind(this)}/>
????????????????????<button?onClick={this.handleBtnClick.bind(this)}>add</button>
????????????????</div>
????????????????<ul>
????????????????????{
????????????????????????this.state.list.map((item,i)=>{
??????????????????????????return?<li?key={i}>{item}</li>
????????????????????????})
????????????????????}
????????????????</ul>
????????????</div>
????????);
????}

}

export?default?TodoList;