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