Not getting value on console in react

Question

Its a simple Todo react app. I want to fetch the user input on the console. but i am not getting any as i type in the input box.

Its a simple Todo react app. I want to fetch the user input on the console. but i am not getting any as i type in the input box.

import { useState } from "react";

const Todo = () => {
  const [Items, setItems] = useState("");

  return (
    <div>
      <div>
        <input
          type="text"
          value={Items}
          onChange={(e) => setItems(e.target.value)}
        />
      </div>

      <div>
        <p>Apple</p>
      </div>
    </div>
  );
};

function App() {
  return (
    <div>
      <h1>TODO</h1>

      <Todo />
    </div>
  );
}

export default App;

Answer 1

if i understand you correctly

import "./styles.css";
import { useState } from 'react'

export default function App() {
  const [Items, setItems] = useState("");

  const onChange = (e) => {
    console.log(e.target.value)
    setItems(e.target.value)
  }

  return (
    <div>
      <div>
        <input
          type="text"
          value={Items}
          onChange={(e) => onChange(e)}
        />
      </div>
    </div>
  );
};