Tengo el siguiente código/componentes. El evento onChange en el componente Input importado no funciona, no se activa. He probado diferentes soluciones en la web pero no funcionan. Sin embargo, si trato de representar un elemento directamente en la función de la aplicación en lugar de importar un componente externo, funciona. ¿Qué estoy haciendo mal? Gracias.
Componente de entrada
import React from "react"; export default function Input(event) { return <input />; }componente del artículo
import React from 'react'; export default function Item({text}) { console.log({text}); return <li>{text}</li> }Aplicación.JS
import React, { useState } from "react"; import "./App.css"; import Input from "./input"; import Item from "./item"; function App() { const [text, setText] = useState(); function handleChange(event){ console.log(event.target.value); setText(event.target.value); } return ( <div className="App"> <h1>JSX will go here!</h1> <Input onChange={ event => handleChange(event)} /> <Item text={text} /> </div> ); } export default App;Estructura de carpetas:
Pasaste eso como apoyo. El componente del artículo debe ser
export default function Input(props) { return <input onChange={props.onChange}/>; } Recuerda pasar el accesorio al elemento <input />
function Welcome(props) { return <h1>Hello, {props.name}</h1>; } function App() { return ( <div> <Welcome name="Sara" /> <Welcome name="Cahal" /> <Welcome name="Edite" /> </div> ); }