Store A List In The State Using The Usestate Hooks In React.Js

import ReactDOM from 'react-dom'
import { useState } from 'react';


const Home = () => {

    const [name, setName] = useState("");

    const [nameList, setNameInList] = useState([]);

    const handleClick = (event) => {
        event.preventDefault();
        setNameInList([name, ...nameList]);
    }

    const nameChangeHandler = (event) => {
        
        setName(event.target.value);
    }

 

    return (
        <form>
            <div>
                Name:
                <p><input type="text" name="nameField" onChange={nameChangeHandler} /></p>
                <button onClick={handleClick}>Click me</button>

                <ul>
                    {nameList.map(myname => <li key={myname}>{myname}</li>)}
                </ul>

            </div>
        </form>
    );
}

ReactDOM.render(<Home />, document.getElementById('root'));

Query/Feedback