So we've got our charts successfully rendering inside of our application all we need to do now is replicate 2
this two more times once for the pressure and once for humidity. 3
There's one thing I want you to think about ahead of that though if we were going to duplicate the spark 4
lines in here in the same file we would end up with something that looks like this. 5
And this is something that should definitely give you pause if you ever find yourself replicating some 6
piece of markup in this fashion right here. 7
It's definitely a sign that you're probably going to want to be playing this out to be a separate component 8
a reusable component. 9
So I think this would be a really good opportunity to refactor our SPARC lines code right here into 10
a separate component and reuse that three times instead of writing out all this markup right here for 11
defining a single char three times in a row. 12
OK. 13
So let's get to it. 14
We'll be making a separate component. 15
And as usual we need to decide whether this is going to be a container or a component. 16
In this case the choice is going to be a lot easier. 17
We're generating all of our data inside of this function right here which means we're always going to 18
be passing it directly into that chart. 19
That means that this component this new chart component we're going to make doesn't need to talk to 20
redux at all because it's going to be getting its data from its parent. 21
So we'll just make it a component instead and sodomite components folder right here. 22
I'm going to make a new directory call or see a new file called Charcot. 23
Jay Yes. 24
Now once we're in here we need to ask ourselves the question should this be a class based component 25
or a function based component. 26
In this case we don't need to make any use of state inside of our chart at all. 27
Any use of phone of component state it's going to be just some props come in. 28
We render a component that's it. 29
No extra you know jumping around or any fancy stuff going on at all. 30
So we can really get away with just making a functional component here. 31
Let's throw in some boilerplate to make that happen. 32
The top will do import react from react and then will export default props the fat arrow function and 33
we will return. 34
It's 35
a div for just right now. 36
Now let's go ahead and copy paste over some of the code that we were using for making a chart. 37
And we do is make sure that you clean up the old code Songun specifically rather than copy. 38
I should say cut. 39
So I'm going to cut the import statement at the top paste it my char and I am and come back over and 40
cut the spark lines code in here as well and I'm going to paste it inside of this div. 41
We don't really need this top level div right here. 42
But as you'll see in just a minute we're going to add another element in here. 43
So trying to keep the div around anyways. 44
Ok so now that we're in here we've got to just fix a couple loose ends. 45
First off our component right here is making reference to a variable of temp's which doesn't exist anymore 46
in here. 47
We're going to pass the data in as a property. 48
So instead of saying temp's will say prop's dot data because we'll pass it in as a property called Data 49
next. 50
This is hardcoded for the color red. 51
We probably want to make that available as a level of configuration. 52
So instead of hard coding it I'll say prop's start color. 53
That looks pretty good. 54
Now we just need to import it back into weather list and make use of it in here. 55
So from here we'll import charts from up into components chart up into components chart and then we'll 56
place our new charts and expects to properties a color and some data. 57
So for this first chart that replace your the property or the data that we're going to pass in is still 58
going to be the temperature right. 59
We're still rendering a chart for the temperature. 60
So will pass and temps and then we're going to pass in a color as well. 61
And this one will be let's do orange and then we'll just do a self-closing tag here for the chart. 62
Okay I'm going to save this and let's give it a shot in the browser. 63
So refresh 64
and let's do a search for Phoenix Denver Dallas Yep. 65
Looks like we're still good to go here. 66
So what we did in this section was refactored out that chart component to be its own separate functional 67
component. 68
This is something that I want to get really used to finding out over time or you know seeing that kind 69
of pattern throughout the throughout your different re-act projects if you ever see yourself see yourself 70
starting to replicate markup in your file. 71
That's definitely a sign that you've got a really good opportunity for doing a factor into a separate 72
reusable component on your hands. 73
One of the best parts about this is specifically for this chart. 74
This is such a generic component right here that we could really turn this into a usable component for 75
other projects as well. 76
Right. 77
We could really use this sparkling component all over the place because it's so small there is no additional 78
configuration. 79
It's just very clear pass in your data pass your color. 80
And that's pretty much it. 81
You're good to go. 82
OK. 83
So let's go ahead and continue in the next section where we're going to make a new chart for the temperature 84
or excuse me for the pressure and the humidity as well.