• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Bear Bibeault
  • Devaka Cooray
  • Liutauras Vilda
  • Jeanne Boyarsky
Sheriffs:
  • Knute Snortum
  • Junilu Lacar
  • paul wheaton
Saloon Keepers:
  • Ganesh Patekar
  • Frits Walraven
  • Tim Moores
  • Ron McLeod
  • Carey Brown
Bartenders:
  • Stephan van Hulst
  • salvin francis
  • Tim Holloway

React Props  RSS feed

 
Ranch Hand
Posts: 335
3
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
 
Marshal
Posts: 67164
169
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator

Cody Biggs wrote: it looks like one component is creating the props, and the other component is using them. Just confused


That's exactly what is happening. This is obviously a simplistic example as you'd never have a real program that has all the recipes hard-coded into the code. So the RecipeApp component is obviously not how you'd really do things.

But the purpose of this example is to show how the Recipe component can be reused with any different values for the props. Note how the recipe component doesn't care about pasta or specific ingredients but generates its view based upon whatever is passed to it in the props.

So, in this example, RecipeApp isn't the focus (except perhaps to show how props are sent to child components), the focus is on the reusability of the Recipe component.

Make sense?
 
Cody Biggs
Ranch Hand
Posts: 335
3
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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.
 
Bear Bibeault
Marshal
Posts: 67164
169
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator

Cody Biggs wrote: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?


No. The point is that props are passed to child components from its ancestors.

Remember that most data is actually going to come from an Ajax call to a data store of some type. It is never appropriate for a component such as Recipe to fetch its own data. That makes it non-reusable. The point of the exercise is to show that Recipe is reusable no matter where the data comes from. Recipe, as a view component, is only responsible for creating the view from the data passed to it in its props.

There is no lesson to be learned from RecipeApp which is just a driver for the exercise. So don't draw any conclusions from it.

In real-world apps, there are also other ways to propagate data around the component tree. Redux, for example, or the new Context API introduced in React 16. But the introduction of any of those storage technologies doesn't affect the design of Recipe. The parent of Recipe will always be responsible for providing the props for Recipe no matter where it comes from.

Note that the parent of Recipe may also rely on its parent for data as well.

Again, the point to be had here is that Recipe, as written, gets its data from its props which can come from anywhere and it doesn't matter to Recipe.

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.


Of course they are going to change.

Think of a feature of a recipe program such as: show me all the recipes with a name that matches a user-provided phrase.

The user types in "chicken". Some service fetches the list of recipes from the DB (or wherever) that have the phrase "chicken" in its name. To display them all, eventually some parent component is going to use the Recipe component for every recipe that was fetched.

So each instance of the Recipe component has different props passed down to it.

Perhaps think of props for a component in the same way that you think of arguments passed to a method. They are the incoming data that the component will use.

I don’t see the importance of those props if I can easily add them using html.


So are you planning to write a different component for all 54 million recipes in a database? Of course not. You want one Recipe component that can create a view for any recipe. You can't do that by hard-coding data into the program code, right?
 
Cody Biggs
Ranch Hand
Posts: 335
3
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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...
 
Bear Bibeault
Marshal
Posts: 67164
169
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
That's a useless constructor. It's somewhat rare for React components to have a constructor -- the work is usually done in the React lifecycle methods. Sometimes a constructor is useful for initializing state that needs to be computed from props, but that's pretty rare. When you do use a constructor, it is passed props and you must initialize super with it. But only create a constructor if you absolutely need one.

In fact the great majority of components usually only end up having a render() method. (In which case there is a shortcut for defining them, but that's another show.)

The props are passed to a child component from its parent. For example, let's say we had a list of people that we wanted to pass from one component to a child. In the parent component we might use:


In the PeopleList component, props will contain a variable named people that references the list of people.
 
Bear Bibeault
Marshal
Posts: 67164
169
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator

Cody Biggs wrote:Did not have any examples of user entered props...


It's irrelevant where the data comes from. I used the example of user-entered data because it's clear that you cannot code the data in the HTML because you don't know what it is until run time.
 
Cody Biggs
Ranch Hand
Posts: 335
3
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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?
 
Bear Bibeault
Marshal
Posts: 67164
169
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator

Cody Biggs wrote:am I understanding that correctly?


Yes.

except in real world the parent component would be making that prop from user input?


Maybe. Or maybe from a database. Or maybe from a hard-coded value in the program. Or maybe from a web API request. Or maybe from the parent component's own parent component in its props. Or maybe ...

The point is that the child component doesn't care. It gets the data in the props and where it originally came from is completely irrelevant.
 
Cody Biggs
Ranch Hand
Posts: 335
3
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
 
Cody Biggs
Ranch Hand
Posts: 335
3
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
The above was done in sublime. Instead of cloud9 like I was doing
 
Bear Bibeault
Marshal
Posts: 67164
169
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Are you sure of your tool-chain? Babel and webpack are complicated tools.

What I'd suggest is to use a starter framework such as create-react-app that sets up the skeleton of a working app complete with toolchain. This lets you concentrate on the code of your app and not worry about the toolchain.

I've started all my React apps using it.
 
Cody Biggs
Ranch Hand
Posts: 335
3
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
 
Bartender
Posts: 1856
81
Android Chrome IntelliJ IDE Java MySQL Database
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Mooo!

Your posting was just mentioned in the July 2018 CodeRanch Journal and for that you get a cow.
 
It is sorta covered in the JavaRanch Style Guide.
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
Boost this thread!