Check out a free preview of the full Complete Intro to React, v5 course:
The "One-Way Data Flow" Lesson is part of the full, Complete Intro to React, v5 course featured in this preview video. Here's what you'd learn in this lesson:

Brian renders the list of pets returning from the Pet client by passing from data parent to child, and demonstrates a key pattern of React called one-way data flow, also known as "one-way binding".

Get Unlimited Access Now

Transcript from the "One-Way Data Flow" Lesson

[00:00:00]
>> Brian Holt: So what's really good about this now is we have pets up here, right? And this represents a set of pets that we've gotten back from the API. Now, I'm gonna create another component here.
>> Brian Holt: You can get rid of that console log.
>> Brian Holt: Underneath the form here, we're gonna create something called Results, and we're just gonna pass in pets, so pets = {pets}.

[00:00:28]
>> Brian Holt: And then up here, at the top, we're gonna say, import results from './Results'. Again, we haven't created this yet, but we're about to. So, line 3, whoops,
>> Brian Holt: import results from './Results'. So we put that in.
>> Brian Holt: And then down here, we put Results with pets={pets}, there on line 54.

[00:01:00] And we're about to go create this new file,
>> Brian Holt: And start displaying our pets in a useful way.
>> Brian Holt: Okay, save that. New file called results.js. Gonna import react from 'React'. Import Pet from './Pet'. If you remember, one the very first things we did in the course was create the Pet component, we're gonna reuse that.

[00:01:36] And here, I'm gonna say, const Results = ({ pets )},
>> Brian Holt: Whops double arrow. Then we're going to return.
>> Brian Holt: And here we're just gonna do a bit of markup. So, we're gonna say div className="search".
>> Brian Holt: And we're gonna say, if pets.length === 0, and we're gonna use the ternary.

[00:02:17] So if it has no length, which means no results have come back from the API yet, what we're going to return is an h1 that says, No Pets Found. Okay, otherwise we're going to return something that displays all the pets, right? So we're gonna say, pets.map, and we're gonna take in a pet and we're going to make a Pet component out of it.

[00:02:48]
>> Brian Holt: So we need to do animal ={pet.type}. And again, remember, these are coming from the API.
>> Brian Holt: Sorry, rather, you have to make a Pet component, Pet.
>> Brian Holt: And inside of here I'm gonna say animal,
>> Brian Holt: ={pet.type}.
>> Brian Holt: I'm gonna say, key={pet.id}.
>> Brian Holt: name={pet.name}.
>> Brian Holt: breed={pet.breeds.primary}.
>> Brian Holt: media={pet.photos}.

[00:03:43]
>> Brian Holt: location=, I'm gonna use template strings, so the backticks there, right?
>> Brian Holt: And we're gonna say ${pet.contact.address.city}, ${pet.contact.address.state}. And then lastly, we need the ID, which will be equal to {pet.id}.
>> Brian Holt: Okay, so that'll do that. Again, this is a map, so this is going to return, for every pet that I get back from the API, it will give back one Pet component.

[00:04:28] And if it can't find anything, then it'll just say, No Pets Found. Now, it would be good to make this more sophisticated, right? It would be better if this had a nice loading indicator and things like that. That's not something we're gonna do today, but there's obviously better UX that you could do about this.

[00:04:43] So again, remember we're getting pets here, this is coming from the parent, right? S we search for the pets in the parent, and then we pass that down into the child component, right? This is a key pattern in React. It's a key pattern React because you have data flowing from parent to child, child to its child and child to its child, right?

[00:05:03] So it's this data that flows down. But notice it doesn't flow up, right? This is called one-way data flow. This is really, really useful, because if I have a problem with search params, I know that problem is not arising from any of its child components, right? So it's not arising from Result, it's not arising from Pet, because while the parent can affect the child, the child cannot affect its parent.

[00:05:28] It doesn't even know who its parent is.
>> Brian Holt: Again, this feels limiting in some fashions, but in the end it actually ends up being extremely useful. Because if I have any bugs, I know where to start. And that's super helpful.
>> Brian Holt: Now I say that it only flows one way and it can only possibly flow for some way, there actually are some ways to reverse that flow.

[00:05:54] And it's intentionally difficult, because most of the time you should not and do not need to. It's actually really only useful for library authors, right? So someone like React Router or something like. For the most part, that's not a pattern that you should be adopting.
>> Brian Holt: But in intermediate React, I'll show you how.

[00:06:16] Last thing down here, make sure you do, export default Results. Save that.
>> Brian Holt: And then you should be able to come back over here. You might have some sort of error, just refresh the page, it probably will go away from Parcel.
>> Brian Holt: Okay, so, I'm just gonna hit Submit.

[00:06:37] And you can see here, now I'm getting real results back from the API. So we have Fatboy Slim and Cindy and Holly.
>> Brian Holt: And looks like these are mostly dogs.
>> Brian Holt: But you should be able to find cats as well. That's cuz it is only searching for dogs.

[00:06:57] So it's doing its job.
>> Brian Holt: But we're able there to switch to cats, right? And now these are cats to adopt as well.