Components Interacting

Learn how to make React comopnents interact with one another.

Start[missing "en.views.course_landing_page.react-101.course_illustration" translation]
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

Components Interacting

Start[missing "en.views.course_landing_page.react-101.course_illustration" translation]