Chevron Left Icon
Components Render Other Components
Lesson 1 of 3
Chevron Right Icon
  1. 1

    A React application can contain dozens, or even hundreds, of components. Each component might be small and relatively unremarkable on its own. When combined, however, they can form enormous, fant…

  2. 2

    Here is a […] method that returns an HTML-like JSX element: […] You’ve seen render methods return […] s, […] s, and […] s, just like in the above example. Render methods can als…

  3. 3

    This is new territory! You’ve never seen a component rendered by another component before. You have seen a component rendered before, though, but not by another component. Instead, you’ve seen …

  4. 4

    When you use React.js, every JavaScript file in your application is invisible to every other JavaScript file by default. ProfilePage.js and NavBar.js can’t see each other. This is a probl…

  5. 5

    Alright! You’ve learned how to use […] to grab a variable from a file other than the file that is currently executing. When you import a variable from a file that is not the current file, t…

  6. 6

    Now you’re ready for […] to render […] ! All that’s left to do is render […] .

  1. 1

    Previously, you learned one way that components can interact: a component can render another component. In this lesson, you will learn another way that components can interact: a component can …

  2. 2

    Every component has something called […] . A component’s […] is an object. It holds information about that component. To see a component’s […] object, you use the expression […] . …

  3. 3

    You can pass information to a React component. How? By giving that component an attribute: […] Let’s say that you want to pass a component the message, […] . Here’s how you could do i…

  4. 4

    You just passed information to a component’s […] object! You will often want a component to display the information that you pass. Here’s how to make a component display passed-in informa…

  5. 5

    You have learned how to pass a […] to a component: […] You have also learned how to access and display a passed-in […] : […] The most common use of […] is to pass information to …

  6. 6

    Awesome! You passed a prop from a component to a different component, accessed that prop from the receiver component, and rendered it! You can do more with […] than just display them. You ca…

  7. 7

    You can, and often will, pass functions as […] . It is especially common to pass event handler functions. In the next lesson, you will pass an event handler function as a prop. However, you…

  8. 8

    Good! You’ve defined a new method on the […] component class. Now you’re ready to pass that function to another component. You can pass a method in the exact same way that you pass any oth…

  9. 9

    Great! You just passed a function from […] to […] . In the code editor, select Button.js. Notice that […] renders a […] element. If a user clicks on this […] element, the…

  10. 10

    Let’s talk about naming things. When you pass an event handler as a prop, as you just did, there are two names that you have to choose. Both naming choices occur in the parent component class…

  11. 11

    Every component’s […] object has a property named […] . […] will return everything in between a component’s opening and closing JSX tags. So far, all of the components that you’ve see…

  12. 12

    Take a look at the […] component class. Notice that on line 8, […] expects to receive a prop named […] . The received […] will be displayed inside of a […] element. What if no…

  13. 13

    That completes our lesson on […] ! […] is quite possibly the longest and most difficult lesson in all of our React courses. Congratulations on getting this far! Here are some of the skill…

  1. 1

    Dynamic information is information that can change. React components will often need dynamic information in order to render. For example, imagine a component that displays the score of a bas…

  2. 2

    A React component can access dynamic information in two ways: […] and […] . Unlike […] , a component’s […] is not passed in from the outside. A component decides its own […] …

  3. 3

    To read a component’s […] , use the expression […] : […] The above component class reads a property in its […] from inside of its […] function. Just like […] , you can use …

  4. 4

    A component can do more than just read its own state. A component can also change its own state. A component changes its state by calling the function […] . […] takes two arguments: an…

  5. 5

    The most common way to call […] is to call a custom function that wraps a […] call. […] is an example: […] Notice how the method […] contains a call to […] . You may have…

  6. 6

    There’s something odd about all of this. Look again at Toggle.js. When a user clicks on the […] , the […] method is called. Take a look at […] ‘s definition. […] calls […]…

  7. 7

    In this unit, you learned how to use […] and […] to access one file from another. You learned about […] and […] , and the countless variations on how they work. Before this unit, y…

What you'll create

Portfolio projects that showcase your new skills

Pro Logo

How you'll master it

Stress-test your knowledge with quizzes that help commit syntax to memory

Pro Logo