import React , { useState }from 'react'

const Dolist = () => {

    const [inputList,setInputList] = useState("");
    const [Items,setItems] = useState([]);

    const itemEvent = (event) => {
        setInputList(event.target.value);
    };

    const listOfItems = () => {
        setItems((oldItems) => {
            return [...oldItems , inputList];
        });
    };

    return (
    <div>
      <div className="main_con">
        <div className="center_con">
         
         <h1>ToDo  List</h1>
         <br/>
         <input type = "text" 
                placeholder="add todo Item" 
                value={inputList} 
                onChange= {itemEvent} />
         <button onClick = { listOfItems } > + </button>

         <ol>         
           
            { Items.map((itemval) => {
                 return <ul> {itemval} </ul>
             })}

         </ol>         
        </div>
      </div> 
    </div>
    )
}

export default Dolist