Add User List in React - A Simple Example to Add data to List

Add User List in React 

A Simple Example to Add to List

import React, { useState } from 'react'
const MyForms = () => {
    const initialList = [
        'userA',
        'userB',
        'userC',
    ];
    const [username, setUsername] = useState();
    const [userdata, setUserList] = useState(initialList);

    const onInputChangeHandler = event => {
        event.preventDefault();
        setUsername(event.target.value)
    }
    const onSubmitHandler = event => {

        if (username) {
            setUserList(userdata.concat(username));
        }
        event.preventDefault();
    }
    return (

         <form onSubmit={onSubmitHandler}>
            <h1>{username}</h1>
            <h2>
                {
                    userdata.map((user) => <li> {user}</li>)
                }
            </h2>
           UserName:  <input type="text" value={username} 

onChange={onInputChangeHandler} />

             <input type="submit" value="Add User" />

        </form>
    )
}

export default MyForms