All right.
And once we have the stats container in place, now let's work on the charts container.
And essentially, I'm looking for these imports.
So bar chart, area chart as well as use state and you'll see why we need that in a second as well as
the wrapper.
So this is something of course, we'll set up a little bit later if you're interested in working on
the CSS.
So let me look for my charts container.
First, let's start by setting up those imports.
Remember, we're passing in the data, so this is what I want to access.
That's why I'll right away the structure it.
And after that, let's set up a local state value which we'll use to toggle between the area chart and
bar chart.
So in my case, I'm going to call this bar chart, but of course naming is always up to you.
So I'm going to go here with set bar chart and let's set it equal to use state.
And in my case, I'm going to set it equal to true.
So by default, I'll display the bar chart.
Then when it comes to return, we're going to go with the wrapper.
Inside of the wrapper we want to set up a heading for and let's say monthly applications.
After that, let's set up the button which we're going to use to toggle the state.
So in here, let's go with button element type will be equal to a button.
And once the user clicks the button, I want to set it equal to the opposite value.
So if by default this is true, then once the user clicks the button, it's going to be set to false.
And of course it works the same other way around.
So in here, let's go with on click.
And then in the callback function we just want to go with set barchart.
And like I said, we'll just set it equal to the opposite value.
Now, as far as the text inside of the button, well, again, we'll use the ternary operator.
And based on the value, either I'm going to display the area chart or the bar chart.
So basically, if it's true, then I want to display area chart in the button.
If not, if it's false, then I want to display the bar chart.
And then right after the button, I want to set up another ternary operator and essentially display
one of the components again based on the bar chart value.
So in this case, if it's true, I'm going to display the bar chart and I'll grab this data prop and
pass it down to a bar chart.
So data is equal to data.
And if it's false, then we want to display the area chart.
And again, data is equal to data.
Let's close our component and once I navigate to the browser, this is what we should see.
So this is the button.
And notice basically we get this opposite value.
So if the bar chart is set to true, then of course I display the bar chart.
But in the button I display that user can see the area chart correct.
Now if I click, I'll display the area chart and then of course in the button I showcase the bar chart.
And with this in place, we can start setting up our charts.