Welcome to this section of Redline Data and react, which simply means how we can display lists of data.
So we have a couple of ways of doing it.
But in React we often use what is called the map method or the for each method.
So let’s go ahead and demo that.
So inside our project here, let’s create a new folder under the components and call it as a data rendering.
And then inside that, as usual, let’s create a function data.
Adrenaline dot G’s and let’s go forward and boom.
There you go.
So let me have my H one and let’s say data rangeland and let’s mount the component inside the app.
And here we go, data.
Rendering the auto part is also working and now less mounts that.
And indeed I have data wrangling so how can we go about that?
How we can render a piece of data?
Well, like I said, what you are doing is we are just using some static data.
So as you move on, we are going to make that application more dynamic.
So let’s say that inside the data rendering here, we have less of product.
So let’s go ahead and then have some data inside our internal state of our component.
So we need what is called the you state because I want to manage a piece of state inside my component.
And here comes.
And then my array is equal to my user state.
And now here, let’s say that you want to display some list of posts.
So here is going to be our SC products.
So here we’re going to be the product and then the function to update the products going to be as set
product.
And then the array here is going to take the the initial state here going to take sorry, an array of
product.
So here array and an object.
And then on the first product, we can say that where the first products for this, let’s say the name
here is going to be.
Mark.
And now it’s going to be, let’s say, the price or the price of the products, let’s say one $20,
for example, and let’s say the description of the products, let’s say based.
Good.
Ever.
Whatever you want to give it.
As that.
Tonight we have one product so we can copy this one and repeat it many times as you want.
So here let’s say mark two and then change one to be more precise.
Let’s say iPhone and let’s say you’re going to be at $300 and let’s say best iPhone ever and let’s change
this one to, let’s say microphone or Mike and they say is $12 and then best microphone error.
So if I console.log the product, it contains my initial product list.
So let’s console.log that one more time and then let’s have a look inside the console.
So check it out inside the console here.
And indeed we have array of this product, so how can we display them onto the page?
And that’s what we are going to use to make use of it.
So we have couple of ways of doing it, talking about the array methods for each map and others.
But in React, the most commonly one that we use is called map because MAP creates a new array and for
each also we can use for each as well.
So how can we use map to display list of product as you see on the screen?
So as usual, because we want to write JavaScript inside our GSIS, we need to bring our carry here.
Then we take the products, which is this.
And now we can use dots map as that as a function.
And next is you pass in a callback function and now we can return something like this.
So inside that we have the individual products inside my array, my callback and now retain remember
is going to retain some g’s x.
Right?
So here, return gsx here.
And now we have a parent and let’s call this one as a div.
And now inside here which we try to console.log the product here we have the product here, so let’s
save it.
And now let’s check the console.
And indeed we have the individual product inside my callback function.
That is my map.
So what about this warning?
It says that each hiding should have a unique key.
Don’t worry about this beautiful warning.
We will fix it very soon.
So let’s go ahead and make sure that we display something to the page.
Always remember that we add component.
Always retain what react elements.
So here.
If we don’t retain some I mean multiple elements put them in parent Dave as that.
And now first of all, we need a product name so we can put them inside any element, let’s say each
one like that.
And the inside my JavaScript here manages syntax products and then dot name.
This is my product name.
So let’s say and now we have Mac and iPhone.
What about the product?
So the price, so p tag, let’s add P tag here and it going to be products dot price and then we can
add the dollar sign in front of it.
And there we go, we have the price.
And to what about the description?
We can copy that.
And then you’re going to be description products and then description and let’s remove the symbol,
the symbol here and now we have them as that.
So that is how we can make use of data handling in React.
So like I said and the upcoming one upcoming videos be fetching a data from such an API and then we
display it by the format is the same.
Then next video, let’s go ahead and fake this particular error says that as a key prop is required.