Cody Biggs

Ranch Hand
+ Follow
since Jun 21, 2016
Cows and Likes
Cows
Total received
3
In last 30 days
1
Total given
0
Likes
Total received
6
Received in last 30 days
0
Total given
4
Given in last 30 days
0
Forums and Threads
Scavenger Hunt
expand Ranch Hand Scavenger Hunt
expand Greenhorn Scavenger Hunt

Recent posts by Cody Biggs

Think I got it. I did know what setState was really doing. But after a few hours of reading, and looking at examples it makes more sense. Especially the target value. I didn’t know what was going on with that, but I figured it out. Appreciate you hanging in there with me bear
This is just like props where its going to take me 4 days to get this lol. I can see and understand

However I still dont see where this.state.todos is getting its value. There is text inside that box, and once submit is pressed it is telling setState to put that todo in the array? Or Something is putting it in the todos array, and setState then adds that to be rendered. Like in javascript there would be like a .push inside a method saying that once its clicked add the text to the array. But react doesnt have a push method. So if this makes sense...what is reacts push method here? How does react know to put the new todo in the array once the button is pushed?
Sorry, I meant a stateless component that uses deconstruction, not destructed..


So im still confused on the code below. There is a state array made called todos that is empty, but then he makes a variable todos array to hold the state todos array. Using the the spread operator the array values will look like "wash dishes", "clean room" instead of ["wash dishes", "clean room"]. I guess I dont exactly see where todos gets the values from? What gives todos a value to expand? because in the input value is set to newTodo which just clears the input after the todo is added?


and then still this. I see the deconstruction. So this is just so that he can use {newTodo}? This is not somehow changing any values? so this should still be an empty ' '?
I am back and of course this time it has to do with state! So I know state is not immutable, it can be changed but you only want to change it using setState. If other components need state it also needs to be passed from a parent to child as props. I was going through my udemy lessons, and he did this example of a todo list where you can add new todos. I am confused on some of the code... Here is his full code



My questions....

First there is this code at the very top. So I know this a destructed function. im assuming hes using this to make it more organized? Because thats being used to map the array.



Then this. So todos is a empty array as state, and on the handleSubmit todos is still an empty array with this.state.todos. and set state is updating the todos ?



One more thing, and I apologize that this has alot of questions, but I need to understand. This line of code. Not sure. I know below this in the full code the todos are getting rendered making li's of whats in the array, but im not sure what this does


Appreciate the help Bear. I will just go back over to cloud9 for the time being until I can do a little more research for writing the code on my own editor
The above was done in sublime. Instead of cloud9 like I was doing
Appreciate the help. One last question.....ok well not last question, but one question until I try to move on. So Can you not write to the browser using jsx and react? I tried rendering just a word, and everytime I try to see if it worked nothing shows up. Unless im doing something wrong? But I feel like I had something working when using the inline babel with html instead of seperate files. This is what I have

HelloReact


html


index
ok...let me see if I finally understand this. Just gonna try something simple to see if I got this...so the parent component makes the prop, and the child uses the prop? Like in the examples above I had? So this is what im thinking it should look like then

the parent component making the prop



And the child making use of the prop with this.prop.hairColor


am I understanding that correctly? except in real world the parent component would be making that prop from user input?
Alright so once im confused it takes me longer to understand than probably the average person, but I want to make sure I can actually understand this. From the research I did...the boiler plate for props is


Here is where I am confused....so for in the udemy videos hes only shared what I posted earlier about props, and is about to move on to state. Never did an example with the constructor and super. So im confused on what the values of props is above?

im assuming those props are getting passed from another component? Did not have any examples of user entered props...
Yea, I mean I can see how it’s working...I guess I have a few questions still. So that’s how you would use props generally? Just one component that has all the props going to be used?

Also what’s the point of props? I mean in the example the ingredients I would think they would be a simple list. The ingredients aren’t going to change. Even the title prop you can easily use it as a h1. I guess what I’m saying is I don’t see the importance of those props if I can easily add them using html.
So, I am trying to wrap my head around using props in react. Going through my udemy course, and its suppose to be just a simple recipe card. There are three files for right now index.js, RecipeApp.js, and Recipe.js

index


RecipeApp


Recipe.js



In the above the RecipeApp is setting the title to pasta, and making an array of ingredients. Then in the recipe class uses those values I guess? I dont know im just confused, it looks like one component is creating the props, and the other component is using them. Just confused
Tried a few things I searched, but it still continues to be a little weird. I decided to switch over to cloud9 since it has everything I already need to run. At least while I’m learning react, and then try to switch back over.
So, I am on my way to learning react...well attempting at least. When writing code to just show a picture and a few li's my editor does not like it, and I get errors like "React.Component is not a function", or some error message that has to do with "inline babel". However when I copy and paste the code in instead of typing it, then it works fine. I am using sublime Text 3 to work in, and its just frustrating not being able to focus on react, and trying to figure out why typing it in does not work. its the same exact code whether typing or copy and paste....it just seems to like it more when I copy and paste. Any ideas why this is happening? Is there something better to use for react instead of sublime?

Junilu Lacar wrote:

Cody Biggs wrote:The this keyword refers to the closest object?


Not sure what you mean by "closest" object.  The this keyword here refers to the current object.



Right. This in the car class will always point to the car class, and this in the subclass or any other class will point to that class.

I read somewhere that if there is no object instance or something that ‘this’ will point to the window object. Which I don’t think I’ve ever heard the window object mentioned before.