REACT - ToDoApp

    //img
    

    // INDEX.JS
    import React from 'react';
    import ReactDOM from 'react-dom';
    import App from './App'
    import './index.css';


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

    // APP.JS
    import React from 'react'
    import TodoItem from "./components/TodoItem"
    import todoData from './components/todoData';


    class App extends React.Component { 
    constructor(){
        super()
        this.state ={
            todos: todoData
        }
        this.handleChange = this.handleChange.bind(this)
        }
    
        handleChange(id){
        // console.log("Changed", id)
        //Create a new array. VIdeo todoApp pHase 6 2:40h*** Complex
        this.setState(prevState => {
            const updatedTodos = prevState.todos.map(todo => {
            if (todo.id === id){
                todo.completed = !todo.completed
            }
            return todo
            })
            return {
            todos: updatedTodos
            } 
        }) 
        
        }
        
        render(){
        const todoItems = this.state.todos.map(item => <TodoItem key={item.id} item={item} handleChange={this.handleChange}/>)
        
        return (
            <div className="todo-list">
                {todoItems}
            </div>
        )
    }
    }


    export default App;

    // TODOITEM.JS 
    import React from 'react';

    function TodoItem(props){

    const completedStyle = {
        fontStyle: "italic",
        color: "#cdcdcd",
        textDecoration: "line-through"
    }
        return (
            <div className="todo-item">
            <input type="checkbox" 
            checked={props.item.completed} 
            onChange={()=> props.handleChange(props.item.id)}/>
            <p style={props.item.completed ? completedStyle : null}>{props.item.text}</p>
        </div>
        )
    }

    export default TodoItem

    // TODODATA.JS

    
    const todoData = [
    {
    id: 1,
    text:"Take out the trash",
    completed:true
    },
    {
    id: 2,
    text:"Grocery Shopping",
    completed:false
    },
    {
    id: 3,
    text:"Cook lunch",
    completed:true
    },
    {
    id: 4,
    text:"Walk in Park",
    completed:false
    }

    ]

    export default todoData