[React Part 4] Incomplete Instruction for the state update
aedward8 opened this issue · comments
Page where problem found?
https://github.com/Techtonica/curriculum/blob/main/react-js/react-part4-full-apps.md
Type of problem
Common examples:
- Confusing or incomplete explanation
- In the Guided Practice under the "Create an Updater Function in App" The instruction starts to fall apart. I added the code in App.js but it will not run for multiple reasons. Also it did not include that changes that are needed to be added to the Todo.js file in order for the changes to render correctly.
Using the previous instructions I reworked the code so that it would run as intended but Im sure there is a better way to write it than what I did but I will c/p to the suggestion below. Overall I think this section needs a major revamping to make it follow through properly
Suggested Solution
IN APP.JS
render() { const { todos } = this.state; return ( <div className="App"> <h1>Todos</h1> <div> {todos.length && todos.map((todo, idx) => ( <Todo key={idx} todo={todo} updateTodo={this.updateTodo.bind(this)} /> ))} </div> </div> ); } }
IN TODO.JS
render() { const { todo } = this.props; const { text, updateTodo } = todo; return ( <div> <input type="checkbox" //checked={updateTodo} onChange={updateTodo} ></input> {text} </div> ); } }
For the purpose of creating a full to-do app in React, this video was really clear but it uses functional components, not class ones, so it'd need modifications.
Thanks for reporting, @aedward8 . We discussed this in detail during our weekly meeting and I think the main problem is this section was written like Independent Practice but it's actually meant to be guided practice, so it should not have all these gaps and jumps.
