Estoy tratando de actualizar un estado desde una entrada, que funciona bien cuando el campo está en el mismo componente, pero no funciona cuando lo paso a un componente secundario, ¡parece que no importa lo que le pase!
const Create = () => { const [question, setQuestion] = useState(''); const [components, setComponents] = useState([""]); const handleQInputChange = event => { setQuestion(event.target.value) } function addComponent() { setComponents([...components, "Question"]) } return ( <Button onClick={addComponent} text="Next question"/> <ol> {components.map((item, i) => ( <li> <CreateQuestion question={question} onChange= {handleQInputChange}/> </li> ))} </ol> )}y luego el componente CreateQuestion se ve así:
const CreateQuestion = (props) => { function handleQInputChange( event ) { props.onChange(event.target.value) } return ( <div className="Component"> <label>Question</label> <input name="question" id="question" value={props.value} onChange={props.handleQInputChange} type="text" placeholder="Question" /> <br />He seguido al menos 10 guías sobre cómo pasar los datos de un lado a otro, por lo que puede haberse vuelto un poco complicado. Si coloco la entrada Pregunta directamente en el componente principal, el estado se actualiza, por lo que sospecho que solo soy yo quien no pasa los accesorios correctamente, ¡pero está completamente atascado!
Gracias
Estás haciendo muchas cosas mal:
event.target.value que es una cadena, a props.onChange , que es una función que acepta un tipo Event . function App() { const [questions, setQuestions] = useState([]); const [components, setComponents] = useState(['']); function addComponent() { setComponents([...components, 'Question']); } function addQuestion(question) { setQuestions((qs) => [...qs, question]); } return ( <> <Button onClick={addComponent} text="Next question" /> <ol> {components.map((item, i) => ( <li> <CreateQuestion idx={i} addQuestion={addQuestion} /> </li> ))} </ol> <ul> <h5>Submitted Questions:</h5> {questions.map((question, i) => ( <li> <span style={{ marginRight: '10px' }}> Question n.{question.id} </span> <span>{question.body}</span> </li> ))} </ul> </> ); } const CreateQuestion = ({ addQuestion, idx }) => { const [question, setQuestion] = useState(''); const handleChange = (event) => { setQuestion(event.target.value); }; const handleSubmit = (e) => { e.preventDefault(); addQuestion({ id: idx + 1, body: question }); }; return ( <div className="Component"> <form onSubmit={handleSubmit}> <label></label> <input name="question" id="question" value={question} onChange={handleChange} type="text" placeholder="Question" /> <button>ADD QUESTION</button> </form> </div> ); }; Refactoricé tu código en esta demostración https://stackblitz.com/edit/react-h7m1cu comprueba si te ayuda.
Resolví los problemas principales, moví el estado de entrada al Componente CreateQuestion , agregué una función y un estado al Componente principal que contiene todas las preguntas agregadas cuando envía la entrada, de esta manera puede manejar datos en su Padre , si para ejemplo, desea enviarlo a su servidor.
Cambie su componente CreateQuestion como se muestra a continuación
const CreateQuestion = (props) => { return ( <div className="Component"> <label>Question</label> <input name="question" id="question" value={props.value} onChange={props.onChange} type="text" placeholder="Question" /> </div> ); }el problema es
Usas un atributo como
onChange={props.handleQInputChange}Pero no tiene handleQInputChange cuando llama a su componente como un atributo
<CreateQuestion question={question} onChange= {handleQInputChange}/>