React - onChange event & function not working on imported Input component-CodePudding

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:

Folder Structure

CodePudding user response：

You passed that as a prop. Item component should be

 export default function Input(props) {
    return <input onChange={props.onChange}/>;
  }

CodePudding user response：

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>
    );
}