There are currently no frequently asked questions associated with this exercise – that’s where you come in! You can contribute to this section by offering your own questions, answers, or clarifications on this exercise. Ask or answer a question by clicking reply () below.
If you’ve had an “aha” moment about the concepts, formatting, syntax, or anything else with this exercise, consider sharing those insights! Teaching others and answering their questions is one of the best ways to learn and stay sharp.
Join the Discussion. Help a fellow learner on their journey.
Ask or answer a question about this exercise by clicking reply () below!
You can also find further discussion and get answers to your questions over in Language Help.
Agree with a comment or answer? Like () to up-vote the contribution!
I’ve never been so infuriated by an example before. “Don’t mind the details” just try to understand what the code is trying to do? Why not explain the details before putting it together and overwhelming the student? It’s asinine. Try to understand why multiple constants are being defined at the same time to an empty object or array? We have used prevProps, but now there are prevState and prev? Thankfully I’ve seen the spread syntax before but if I didn’t that’s another brand new concept. Shame on whoever designed this course. I am not going to be continuing with my subscription. This is horrible.
Can anyone tell me why we need to set a unique ID for every onChange event in the text input field.
Why not create a unique Id for the newTodo onSubmit and store it in AllTasks array.
(When creating a todo list in react)
I’ll comment as I think I understand what’s going on until I don’t…
handleChange({ target }){
// destructure "name" and "value" from "target" - fine, I get that
const { name, value } = target;
// setState and pass in the previous state, also fine
this.setState((prevState) => ({
// you set the current state to be the previous state's values???? Why?
...prevState,
// next, overwrite the newTask value you've just set above
newTask: {
// Next you set newTask to a copy of the old newTask. This keeps the title when you switch to description. fine
...prevState.newTask,
// then use a computed property name to set the input. fine (once i'd looked up what that was).
[name]: value,
// why would you keep regenerating a different id every key stroke?
id: Date.now()
}
}));
}
Why on line 7 above is the previous state used? I removed it from the editor and the code works exactly the same.
Instead of returning the old state as an object to setState, you pass in a function that takes prevState as an argument for setState. This way you can safely pass data from a previous state to a new state. This is useful, if state updates depend on asynchronous result (Ex: Clicking a button multiple times to get the current time in seconds). This was probably a bad example…oh well.
For your 4th comment this.setState((prevState) =>, they use object compostion. So setState will have access to 2 objects:
An expanded object (…prevState): shorter syntax to list props of prevState (to iterate through maybe).
A newTask object.
I guess name property of object target will store the name and id. Why is this done? I think the purpose of handleChange ({target}) is to store every update or change on a target object and those changes or updates can be accessed and/or modified via the name or id properties.
I wasted an hour writing this horrible attempt of an explanation Incase I missed the point, hopefully the video I linked above as well as this article might help.
I carried on regardless and the later tutorials filled in the gaps. The last exercise has you write that code from scratch from what you’ve learned to make sure you understand it. I should’ve just got stuck in instead of moaning and getting hung up on it!
Using the finished webapp, what i’ve noticed is that:
if i very quickly click on the Add Task button after having typed something, nothing happens. (if i do it fast enough i can throw in 5 clicks before the button actually works)
if i click on Details field while continuing to type in Add Task field, the focus never shifts. It only shifts after i’ve stopped typing & then a good second or so has passed.
I don’t like this lag. if user clicks on something, the cursor focus should immediately switch. Any ideas why does this delay happen? How do i prevent this delay?
It seems this example is using idiomatic JS, which is very important to teach us. Hence it’s a great disappointment to learn Codecademy never taught us this, even in the intermediate JS class (and no advanced class?). I’m sure you’ve figured this out, but for the next person, some references to understand what is happening
The JS spread operator (…variable):
handleChange is the React convention for the onchange (again, onChange for React) event handler. It gets passed an Event object, which has lots of properties as explained here:
So the idiom used:
handleChange({ target }){
is saying “use only the target property of Event as a the method parameter.”
Shame, they could have included all this in the comments, but this whole course seems hastily created.
In this lesson, I wonder why here import Component in this way? I used class App extends React.Component lots of time, but I never import Component. And I feel confused about why React doesn’t need {}, but Component needs. I thought React and Component are also in my node_modules, aren’t they? The same question is why I have to use {} to import useState?
I guess maybe I have to know more about module knowledge? I often modulize my projects and import componet.js. But I don’t know anything about node_modules.
import defaultExport, { namedExport } from 'react';
So React is the default export in react.js, and useState is the named export in react.js?
But why not import {useState} from ReactHooks.js?
Every module can have two different types of export, named export and default export . You can have multiple named exports per module but only one default export.
) below.
) to up-vote the contribution!
Incase I missed the point, hopefully the video I linked above as well as 
