I have the following code/components. The onChange event on the imported Input component is not working, it doesn't get triggered. I have tried different solutions on the web but they don't work. However, If I try to render an element directly in the APP function rather than importing an external component, it works. What am I doing wrong? Thanks.
Input component
import React from "react";
export default function Input(event) {
return <input />;
}
Item component
import React from 'react';
export default function Item({text}) {
console.log({text});
return <li>{text}</li>
}
App.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;
Folder structure:
You passed that as a prop. Item component should be
export default function Input(props) {
return <input onChange={props.onChange}/>;
}
From React Documentation
Remember to pass the prop into the <input /> element
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
function App() {
return (
<div>
<Welcome name="Sara" />
<Welcome name="Cahal" />
<Welcome name="Edite" />
</div>
);
}