useState to receive input data and post to console - reactjs

Question

Still a junior with React and I'm trying to detect an input from the front end and use useState to collect the input data and post it through the console. I followed React's own tutorial but I can't get this right. It's probably something small I'm forgetting but I've been stuck on this for days. Please help.
function Cards2() {
const [input, setInput] = useState();
console.log(input);
return (
<div id="cards" style={{width: 'auto', margin: '10px'}}>
<div className="card-header" id="card-header" style={{backgroundColor: 'dimgray', color: 'white'}}>
<h5>Header</h5>
</div>
<div className="card-body" id="card-body" style={{backgroundColor: 'lightgrey'}}>
<blockquote className="blockquote mb-0">
<p>Enter Name:</p>
<input onChange={() => setInput(input)} type="email" className="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"/>
<button type="submit" className="btn btn-primary" style={{marginTop: '7px'}}> Submit </button>
<footer className="blockquote-footer">
Someone famous in <cite title="Source Title">Source Title</cite>
</footer>
</blockquote>
</div>
</div>
);
}
export default Cards2;

Answer 1

Your onChange handler in Input needs to be like this:
<input onChange={(event) => setInput(event.target.value)} type="email" className="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"/>
You can use useEffect as suggested in previous answer but that doesn't really matter.

Answer 2

You'll need to use useEffect to track any changes to the input value (or any state value, for that matter). The following link also explains how useEffect works, and how to work it with input.
https://daveceddia.com/useeffect-hook-examples/
import React, { useState, useEffect } from 'react';
function Cards2() {
const [input, setInput] = useState();
useEffect(() => {
console.log(input);
}, [input]);
return (
// your code here
);
}
export default Cards2;