mi componente de clase de aplicación con su estado que se actualiza cuando presiono Intro pero no vuelve a representar inmediatamente el DOM

 constructor(props){ super(props) this.state = { todoItemCurrent: '', todoList: [] } this.handleChange = this.handleChange.bind(this) this.onSubmit = this.onSubmit.bind(this) } handleChange(e){ this.setState({ todoItemCurrent: e.target.value }, ()=> { this.onSubmit(e) }) } onSubmit(e){ if(e.key === 'Enter'){ this.state.todoList.push( { id: this.state.todoList.length + 1, todoItem: this.state.todoItemCurrent } ) } console.log( this.state) // console.log( this.state.todoList) } render(){ console.log(this.state.todoList) return ( <div className="container"> <header> <h1> TO-DO LIST APP</h1> </header> <TextBoxComponent value = { this.state.todoItemCurrent } placeholder = {`type here and hit enter to add an item`} handleChange = { this.handleChange } onEnter = {this.onSubmit} /> <ListComponentContainer todoList = { this.state.todoList } /> </div> ); } } export default App;

el componente de entrada de texto de donde obtengo el valor

 const TextBoxComponent = ({ placeholder, handleChange, onEnter ,value })=> { return ( <input className="text-box" type="text" value={ value } placeholder= { placeholder} onChange = { handleChange } onKeyDown = { onEnter } /> ); } export default TextBoxComponent

mi componente de lista, donde quiero poner el valor en un elemento li y luego agregar el li al elemento ul

 const ListComponentContainer = ( props ) => ( <ul> { props.todoList.map( ({id, todoItem}) => ( <li key={ id }> {todoItem} </li> )) } </ul> ); export default ListComponentContainer