Advertisement
Re_21

try

Jan 26th, 2023
67
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. class DisplayMessages extends React.Component {
  2.   constructor(props) {
  3.     super(props);
  4.  
  5.     this.state = {
  6.       input: '',
  7.       messages: []
  8.     }
  9.   }
  10.   // Agrega los métodos handleChange() y submitMessage() aquí
  11.   handleChange(e) {
  12.     this.setState({
  13.       input: e.target.value,
  14.       messages: this.state.messages
  15.     })
  16.   }
  17.   submitMessage() {
  18.     this.setState({
  19.       input: '',
  20.       messages: [...this.state.messages, this.state.input]
  21.     })
  22.   }
  23.  
  24.   render() {
  25.     return (
  26.       <div>
  27.         <h2>Type in a new Message:</h2>
  28.         { /* Renderiza un input, button, y ul debajo de esta línea */}
  29.         <input
  30.           placeholder="type here..."
  31.           onChange={this.handleChange.bind(this)}
  32.           value={this.state.input}
  33.         />
  34.  
  35.         <button
  36.           onClick={this.submitMessage.bind(this)}>
  37.           btn</button>
  38.  
  39.         <ul>
  40.           {this.state.messages.map(m, i => {
  41.             return <li key={i}>{m}</li>
  42.           })}
  43.         </ul>
  44.         { /* Cambia el código encima de esta línea */}
  45.       </div>
  46.     );
  47.   }
  48. };
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement