1
00:00:00,490 --> 00:00:10,690
Welcome to this section of Redline Data and react, which simply means how we can display lists of data.

2
00:00:10,990 --> 00:00:14,290
So we have a couple of ways of doing it.

3
00:00:14,290 --> 00:00:21,640
But in React we often use what is called the map method or the for each method.

4
00:00:21,820 --> 00:00:24,370
So let's go ahead and demo that.

5
00:00:24,370 --> 00:00:35,500
So inside our project here, let's create a new folder under the components and call it as a data rendering.

6
00:00:36,730 --> 00:00:41,950
And then inside that, as usual, let's create a function data.

7
00:00:44,650 --> 00:00:50,770
Adrenaline dot G's and let's go forward and boom.

8
00:00:50,770 --> 00:00:51,480
There you go.

9
00:00:51,490 --> 00:01:01,660
So let me have my H one and let's say data rangeland and let's mount the component inside the app.

10
00:01:01,660 --> 00:01:04,180
And here we go, data.

11
00:01:05,510 --> 00:01:10,680
Rendering the auto part is also working and now less mounts that.

12
00:01:10,700 --> 00:01:17,210
And indeed I have data wrangling so how can we go about that?

13
00:01:17,210 --> 00:01:20,690
How we can render a piece of data?

14
00:01:21,020 --> 00:01:25,700
Well, like I said, what you are doing is we are just using some static data.

15
00:01:25,850 --> 00:01:30,530
So as you move on, we are going to make that application more dynamic.

16
00:01:30,710 --> 00:01:38,180
So let's say that inside the data rendering here, we have less of product.

17
00:01:38,330 --> 00:01:44,320
So let's go ahead and then have some data inside our internal state of our component.

18
00:01:44,330 --> 00:01:52,190
So we need what is called the you state because I want to manage a piece of state inside my component.

19
00:01:52,460 --> 00:01:54,230
And here comes.

20
00:01:54,230 --> 00:01:57,950
And then my array is equal to my user state.

21
00:01:58,100 --> 00:02:04,370
And now here, let's say that you want to display some list of posts.

22
00:02:04,880 --> 00:02:08,080
So here is going to be our SC products.

23
00:02:08,090 --> 00:02:15,980
So here we're going to be the product and then the function to update the products going to be as set

24
00:02:15,980 --> 00:02:16,940
product.

25
00:02:17,570 --> 00:02:25,250
And then the array here is going to take the the initial state here going to take sorry, an array of

26
00:02:25,250 --> 00:02:25,730
product.

27
00:02:25,730 --> 00:02:28,250
So here array and an object.

28
00:02:28,250 --> 00:02:35,480
And then on the first product, we can say that where the first products for this, let's say the name

29
00:02:35,480 --> 00:02:37,100
here is going to be.

30
00:02:37,890 --> 00:02:38,670
Mark.

31
00:02:41,620 --> 00:02:47,800
And now it's going to be, let's say, the price or the price of the products, let's say one $20,

32
00:02:47,800 --> 00:02:53,620
for example, and let's say the description of the products, let's say based.

33
00:02:54,750 --> 00:02:55,500
Good.

34
00:02:56,580 --> 00:02:57,270
Ever.

35
00:02:57,840 --> 00:02:59,250
Whatever you want to give it.

36
00:03:00,030 --> 00:03:00,600
As that.

37
00:03:00,610 --> 00:03:06,140
Tonight we have one product so we can copy this one and repeat it many times as you want.

38
00:03:06,150 --> 00:03:12,450
So here let's say mark two and then change one to be more precise.

39
00:03:12,450 --> 00:03:21,540
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

40
00:03:21,540 --> 00:03:30,600
this one to, let's say microphone or Mike and they say is $12 and then best microphone error.

41
00:03:30,840 --> 00:03:36,660
So if I console.log the product, it contains my initial product list.

42
00:03:36,750 --> 00:03:43,050
So let's console.log that one more time and then let's have a look inside the console.

43
00:03:43,200 --> 00:03:45,780
So check it out inside the console here.

44
00:03:45,780 --> 00:03:53,460
And indeed we have array of this product, so how can we display them onto the page?

45
00:03:53,460 --> 00:03:56,880
And that's what we are going to use to make use of it.

46
00:03:57,060 --> 00:04:05,430
So we have couple of ways of doing it, talking about the array methods for each map and others.

47
00:04:05,490 --> 00:04:13,770
But in React, the most commonly one that we use is called map because MAP creates a new array and for

48
00:04:13,770 --> 00:04:16,709
each also we can use for each as well.

49
00:04:17,070 --> 00:04:22,860
So how can we use map to display list of product as you see on the screen?

50
00:04:22,980 --> 00:04:30,090
So as usual, because we want to write JavaScript inside our GSIS, we need to bring our carry here.

51
00:04:30,240 --> 00:04:33,000
Then we take the products, which is this.

52
00:04:33,860 --> 00:04:38,900
And now we can use dots map as that as a function.

53
00:04:38,930 --> 00:04:46,310
And next is you pass in a callback function and now we can return something like this.

54
00:04:46,640 --> 00:04:56,630
So inside that we have the individual products inside my array, my callback and now retain remember

55
00:04:56,690 --> 00:04:59,930
is going to retain some g's x.

56
00:05:00,020 --> 00:05:00,590
Right?

57
00:05:00,590 --> 00:05:02,990
So here, return gsx here.

58
00:05:02,990 --> 00:05:06,710
And now we have a parent and let's call this one as a div.

59
00:05:06,860 --> 00:05:14,540
And now inside here which we try to console.log the product here we have the product here, so let's

60
00:05:14,540 --> 00:05:15,080
save it.

61
00:05:15,080 --> 00:05:16,790
And now let's check the console.

62
00:05:18,900 --> 00:05:25,350
And indeed we have the individual product inside my callback function.

63
00:05:25,350 --> 00:05:26,370
That is my map.

64
00:05:27,000 --> 00:05:28,680
So what about this warning?

65
00:05:28,710 --> 00:05:31,710
It says that each hiding should have a unique key.

66
00:05:31,980 --> 00:05:34,040
Don't worry about this beautiful warning.

67
00:05:34,050 --> 00:05:35,220
We will fix it very soon.

68
00:05:35,220 --> 00:05:39,150
So let's go ahead and make sure that we display something to the page.

69
00:05:39,750 --> 00:05:42,420
Always remember that we add component.

70
00:05:42,420 --> 00:05:44,730
Always retain what react elements.

71
00:05:44,730 --> 00:05:45,810
So here.

72
00:05:46,580 --> 00:05:54,020
If we don't retain some I mean multiple elements put them in parent Dave as that.

73
00:05:54,260 --> 00:06:01,580
And now first of all, we need a product name so we can put them inside any element, let's say each

74
00:06:02,060 --> 00:06:03,740
one like that.

75
00:06:03,740 --> 00:06:11,060
And the inside my JavaScript here manages syntax products and then dot name.

76
00:06:11,060 --> 00:06:12,890
This is my product name.

77
00:06:12,890 --> 00:06:17,210
So let's say and now we have Mac and iPhone.

78
00:06:17,390 --> 00:06:18,950
What about the product?

79
00:06:18,950 --> 00:06:30,050
So the price, so p tag, let's add P tag here and it going to be products dot price and then we can

80
00:06:30,050 --> 00:06:33,380
add the dollar sign in front of it.

81
00:06:33,560 --> 00:06:37,340
And there we go, we have the price.

82
00:06:37,340 --> 00:06:40,160
And to what about the description?

83
00:06:40,160 --> 00:06:41,360
We can copy that.

84
00:06:41,360 --> 00:06:49,130
And then you're going to be description products and then description and let's remove the symbol,

85
00:06:49,160 --> 00:06:54,500
the symbol here and now we have them as that.

86
00:06:54,980 --> 00:07:00,290
So that is how we can make use of data handling in React.

87
00:07:00,290 --> 00:07:07,340
So like I said and the upcoming one upcoming videos be fetching a data from such an API and then we

88
00:07:07,340 --> 00:07:09,350
display it by the format is the same.

89
00:07:09,620 --> 00:07:16,400
Then next video, let's go ahead and fake this particular error says that as a key prop is required.