Learning React Snippet (1)

Notes for myself

Course: https://scrimba.com/p/p7P5Hd
Private Repo: https://github.com/Blake-C/freecodecamp-learn-react-js-full-course-for-beginners-tutorial-2019
React Docs: https://reactjs.org/

App Start:

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import Todo from './components/Todo/Todo'

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

App Class Component:

import React, { Component } from 'react'
import TodoItem from './TodoItem/TodoItem'
import todosData from './todosData'
import './todo.scss'

class Todo extends Component {
    state = {
        data: todosData,
    }

    handleOnChange = id => {
        this.setState(prevState => {
            const newState = prevState.data.map(item => {
                if (item.id === id) {
                    item.completed = !item.completed
                }
                return item
            })

            return {
                data: newState,
            }
        })
    }

    render() {
        const todoElements = this.state.data.map(data => {
            return (
                <TodoItem
                    data={data}
                    key={data.id}
                    handleOnChange={this.handleOnChange}
                />
            )
        })

        return <form className="todo">{todoElements}</form>
    }
}

export default Todo

App Functional Component:

import React from 'react'
import PropTypes from 'prop-types'

function TodoItem(props) {
    const { id, completed, text } = props.data

    return (
        <div className="todo-item">
            <label htmlFor={`item_${id}`}>
                <input
                    type="checkbox"
                    id={`item_${id}`}
                    checked={completed}
                    onChange={() => {
                        props.handleOnChange(id)
                    }}
                />
                {text}
            </label>
            <br />
        </div>
    )
}

// PropTypes
TodoItem.propTypes = {
    data: PropTypes.object.isRequired,
    handleOnChange: PropTypes.func.isRequired,
}

export default TodoItem

App Data:

const todosData = [
    {
        id: 1,
        text: 'Take out the trash',
        completed: true,
    },
    {
        id: 2,
        text: 'Grocery shopping',
        completed: false,
    },
    {
        id: 3,
        text: 'Clean gecko tank',
        completed: false,
    },
    {
        id: 4,
        text: 'Mow lawn',
        completed: true,
    },
    {
        id: 5,
        text: 'Catch up on Arrested Development',
        completed: false,
    },
]

export default todosData