Props and Project Component

David Joseph Katz
A free video tutorial from David Joseph Katz
Software Engineer
4.4 instructor rating • 19 courses • 238,853 students

Lecture description

Explore React component props: the way data is passed from a parent React component to a child React component.

Learn more from the full course

React JS Web Development - The Essentials Bootcamp

Bootcamp on the React.js essentials. Gain a strong foundation of the core concepts, and build exciting and useful apps!

10:33:13 of on-demand video • Updated August 2019

  • Learn React the right and learn best practices.
  • Dive into the React engine, and learn how it works under the hood.
  • See how React fits in the big picture of web development.
  • Learn how to build applications from scratch.
  • Cover the crucial concepts of bundling and transpiling, and create frontend application build systems.
English Welcome back. Let's make a project a moment that will display the data for each project. Currently we have a div that is displaying the product title but each project has way more fields like its description link and image. So the new project component is going to take care of displaying all of that. Now the only trouble is how is each individual component. Good to know which project object from the overall project array to display the approach that we're going to take is to use component prop. In react, props are a way for parent components to pass down data to child components. So let's start exploring props by creating the new project component itself. But rather than making a new project.js file well we can declare the project component in the same project.js file so right above the class of projects. Let's make a class called Project and this is going to extend the Component class from react as well. We're gonna add a render method which is needed in all react components. And overall we're going to have a return statement. Don't forget the return. And this is going to return a div as a JSX. Now we're going to make this div also display the product title but the project data is going to be located in the project props rather the component props like state props. Object is available within the this object itself but unlike state where the state is declared locally the props actually comes from an external source. Still the props object itself is going to have a project object to access and this is gonna have the project title. While we're at it let's also add a log of this.props so we can take a closer look at this. Add this props object too in a string let's log this are props and then we're gonna have in a second input the actual the stop props object. Cool now we can use this project component as the JSX instead of the div that we currently have in IMAP function so we're gonna return an overall self enclosing project tag this still needs the key of And then here comes a part where we're accessing the props or setting the props. Now we have a project attribute on the project component you're going to pass down the entire current project object that we're mapping over. So notice that for the props to work you need an attribute with the same exact name as a value that you're accessing within this stuff props. All right let's go ahead and test this out now that we have the code for it. Head to the command line and fire npm run start in the portfolio directory if you haven't already then open up the app in the browser at localhost:3000 and what you're going to find is that the titles are still there. Cool! Now that's definitely working. Go ahead and open up the developer console and you can use option command J in order to open it up automatically and you're gonna find that this.props has been logged three times for each of the projects and each one is an object that contains the relevant information for the project. Awesome. Now that takes care of the props aspect. Now let's go ahead and develop the full UI for each project component. Now we're not going to only want to render the title but let's also render the image description and link. But rather than reaching into this.props that project to access each value every time we can make local constants for each of these values in the render method by using JavaScript destructuring in syntax. So it looks like this we can create a title constant image description and link constant by setting it equal to this. Props that object within a pair of curly braces so the syntax the desctructuring syntax is equivalent to writing const title equals this.props.project.title const image equals this.props. Now project that image and so on for the description and the link. But instead we can use the desctructuring syntax to declare each of these title image description and link constants right away by accessing those equivalent values within the this.props.project Object not desktop props objec,t you probably caught that earlier. Okay now with each of these constants available we can now create a more complete chunk of JSX that is relevant for the project. First up let's actually put the title within a header 3 element. Then we can provide an image element and then it gets the image to display by having a src attribute which in this case is the image itself. An image also needs an alt attribute to display some text in case the image can't load from the server. We're going to have a paragraph element for the description finally to provide a link on the page. Use an anchor element and this has an href attribute in which we can put the link. So that creates the link source any text for the link goes within the pair of tags itself and we're still going to use that link for the actual text. All right go ahead and save that. And once you have it head back to the application and great! That definitely worked. We have a bunch of new JSX within the application. Here's the example react application with its giant picture has its description as well as its link and if you click on it it's gonna go to an external location. All right. So we have all of that. One thing you'll definitely notice though and you can't miss it is that these images are ginormous. So let's get this in control by styling image. Now in react we actually don't need CSS to apply quick styling to JSX. We can actually do styling inline by providing a style object to the actual image. So this object is gonna have keys that match CSS properties like width and height. Now you might recall these properties from any CSS code that you've done before but if you're not familiar with CSS Don't worry there'll be some ramp up on CSS basics later in the course. Also CSS is going to pop up from time to time as you continue developing these front end web apps with react components. But again we can take care of the styling right here within react in line in the JSX. So let's add a width attribute within here that is set to 200 which is equivalent to making the width 200 pixels the height is going to be 120. Cool! And as you save that you'll find that in the application the images are much smaller. Great as one final changed let's make it so that these private items are rendered side to side rather than on top of each other. So we're gonna use an inline style as well. But this time it's going to be for the overall div. Let's add a style over here so make sure to have the pair or rather two pairs of curly braces one to declare the style and then one for the inner object. In this time going to provide a display value and this will set it to inline block which are going to make each block render side to side as block elements the width of the overall div is going to be three hundred. And let's add a margin of ten so that way none of these divs are touching. Go ahead and give that a save,and head to the Projects application. If I just zoom out a little bit overall it's looking a lot better with the divs actually side to side. Awesome. Now you're probably thinking that there's a ton of styling that's missing from the app overall to which I'd agree. So there's going to be a selling video at the end of this section to make this app look a lot better. That being said, with this component completed, now we've covered the concept of props in react and altogether we've covered three huge react topics already. Components, state, and props so I think you're ready for an optional coding challenge. The next part of the project will be to add a component for displaying SocialProfiles. These will be icons for sites like GitHub LinkedIn Twitter and your email, with relevant links to an online profile. That way people will have a way to reach out to you once they're convinced that they want to work with you based on your portfolio. The code is gonna be pretty similar to the approach that we have for the project section. So again it will be presented as an optional challenge that way you have the chance to apply what you've learned already with react!