TODO PROJECT IN REACT JS USING ARRAY HOOK, COMPONENT AND SPREAD OPERATOR

 App.jsx

import React, { useState } from "react";

import TodoList from "./TodoList";

const App = () => {

    const [inputText, setInputText] = useState(""); //Array Hook

    const [list, setList] = useState([]);

    const inputEvent = (event) => {

        setInputText(event.target.value);

    };

    const inputTextList = () => {

        setList((oldLists) => {

            return [...oldLists, inputText] //Spread Operator

        });

        setInputText("");

    }

    const deleteText = (id) => {

        console.log("deleted");

        setList((oldLists) => {

            return oldLists.filter((arrEle, index) => {

                return index !== id;

            });

        });

    }

    return (

        <>

            <div className='main_div'>

                <div className='center_div'>

                    <br/><h1>TODO LIST</h1><br/>

                    <input type='text' value={inputText} 

                placeholder='Enter a text' 

                onChange={inputEvent}/>

                    <button onClick={inputTextList}> + </button>

                    <ol>

                    {list.map((val, index) => {

                        return <TodoList key={index} 

                id={index} text={val} onSelect={deleteText}/>

                    })}

                    </ol>                   

                </div>

            </div>

        </>

    );

};

export default App;

TodoList.jsx

import React from "react";

const TodoList = (prop) => {

    return(

        <>

        <div className="todo">

        <i className="fa fa-times" onClick={ () => {

            prop.onSelect(prop.id);

        }}/>

        <li>{prop.text}</li> 

        </div>

        </>

    );

}

export default TodoList;