¿Por qué funciona cuando hago "estado:" y no "tareas:" en la función addItem(). Pensé que la sintaxis es que pones el estado que quieres cambiar, que en esto serán tareas:
import React from 'react'; import './App.css'; class App extends React.Component { constructor(){ super(); this.state = { value: '', tasks: [] }; this.handleChange = this.handleChange.bind(this) this.addItem = this.addItem.bind(this) } handleChange(event) { this.setState({ value: event.target.value }) } addItem(){ this.setState({ state: this.state.tasks.push(this.state.value), value: '' }) } render(){ const itemList = this.state.tasks.map((num,index) => <li key={index}>{num}</li>) return( <div> <input type="text" value={this.state.value} onChange={this.handleChange}></input> <button onClick={this.addItem}>+</button> <button>-</button> <ul>{itemList}</ul> </div> ) } } export default App;En primer lugar, está mutando su estado, esta es la primera regla cuando se trata de la gestión del estado de reacción. Nunca mutar estado. y necesita envolver sus controladores de eventos en una función anónima para que pueda pasar su objeto de evento. Este es su código corregido a continuación---
import React from 'react'; import './App.css'; class App extends React.Component { constructor(props){ super(props); this.state = { value: '', tasks: [] }; this.handleChange = this.handleChange.bind(this) this.addItem = this.addItem.bind(this) } handleChange(event) { this.setState({ value: event.target.value }) } addItem(){ const tempTasksArray = this.state.tasks.concat(this.state.value) this.setState({ tasks: tempTasksArray, }) } render(){ const itemList = this.state.tasks.map((num,index) => <li key={index}>{num}</li>) return( <div> <input type="text" value={ this.state.value } onChange={(event) => this.handleChange(event) } /> <button onClick={() => this.addItem }> + </button> <button> - </button> <ul>{ itemList }</ul> </div> )} } export default App;