import React from "react"; export default function Form ({handleSubmit, handleChange, value}) { return ( <form onSubmit = {handleSubmit}> <label> <input type="text" name="name" onChange = {handleChange}/> </label> <input type="submit" value="Submit" /> </form> ); }Estoy tratando de crear una aplicación ToDoList básica. Me estoy quedando atascado en la parte en la que representa la entrada de los usuarios en mi componente ToDoList. Cuando alerto el valor de e.target.value me sale indefinido. ¿Cuál es el problema? EDITAR: Agregué mi componente de formulario.
import "./styles.css"; import Header from "./Header.js"; import Form from "./Form.js"; import {useState} from "react"; import ToDoList from "./ToDoList.js" export default function App() { const[items, setItems] = useState([]); let value = ""; function handleChange(e) { value = e.target.value; } function handleSubmit(e) { setItems([...items, e.target.value ]); alert('A name was submitted: ' + e.target.value); e.preventDefault(); } return ( <div className="App"> <div> <Header/> </div> <div> <Form handleChange = {handleChange} handleSubmit = {handleSubmit} value = {value}/> </div> <div> <ToDoList items = {items}/> </div> </div> ); }Porque pasa el formulario completo como evento para handleSubmit y items . Si desea mantener este estilo de código, debe usar cambios de valor de entrada. También debe definir e.preventDefault() antes de hacer todo. Asi que:
import "./styles.css"; import Header from "./Header.js"; import Form from "./Form.js"; import {useState} from "react"; import ToDoList from "./ToDoList.js" export default function App() { const[inputValue, setInputValue] = useState(); const[items, setItems] = useState([]); let value = ""; function handleChange(e) { setInputValue(e.target.value); } function handleSubmit(e) { e.preventDefault(); setItems([...items, inputValue ]); setInputValue(""); alert('A name was submitted: ' + e.target.value); } return ( <div className="App"> <div> <Header/> </div> <div> <Form handleChange={handleChange} handleSubmit={handleSubmit} value = {value}/> </div> <div> <ToDoList items = {items}/> </div> </div> ); }