class TodoList extends Component { List = props => ( <ul> { props.items.map((item, index) => <li key={index}>{item}</li>) } </ul> ); state = { term: '', items: [] }; onChange = (event) => { this.setState({term: event.target.value}); } onSubmit = (event) => { event.preventDefault() this.setState({ term: '', items: [...this.state.items, this.state.term] }); } handleClick=()=>{ this.setState(({count})=>({ count: count+1 })); }; render() { return ( <> <div> <h2> Todo List </h2> <form className="App" onSubmit={this.onSubmit}> <input value={this.state.term} onChange={this.onChange} /> <button>Submit</button> </form> <List items={this.state.items}/> </div> <style>{` .is-done { text-decoration: line-through; } `}</style> </> ); } } <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.0.0/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.0.0/umd/react-dom.production.min.js"></script><List items={this.state.items}/> No estoy seguro de cuál podría ser la razón de esto. estoy haciendo un sencillosubmit junto con el cuadro de texto de entrada y el encabezado Todo List de tareas pendientes. Pero con esa última etiqueta <Lista agregada no muestra nada y hay una página en blancoEl consejo de moverlo fuera de la clase está bien, y DEBE hacerlo, pero también debe entender por qué no funcionó.
La solución más pequeña que podría hacer, y FUNCIONARÍA de esa manera, sería cambiar
<List items={this.state.items}/>a
<this.List items={this.state.items}/>¿Por qué? Debido a que el componente funcional se crea dentro de la clase y, por lo tanto, cuando React traduce el código JSX a funciones JS, dentro de la clase es un método que pertenece a la clase (y sabemos que estos deben llamarse así).
Si lo saca de la clase, entonces no necesita esto, porque está en el mismo ámbito que la definición de la clase.