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