Blog

Design Video List Component : Part 6

February 14, 2019/ Javascript frameworks, Reactnative / 0 comments

Design Video List Component : Part 6- Create a components folder in src folder and add VideoList.js file in it, open this file and start importing component

1. import React, { Component } from ‘react’;
2. import { View, Text } from ‘react-native’;
3. import CardWrapper from ‘../common/CardWrapper’;
4. import CardInner from ‘../common/CardInner’;
6. class VideoList extends Component {
7. render() {
8. return (
9. <View>
10. <CardWrapper>
11. <CardInner>
12. <Text>For Title</Text>
13. </CardInner>
14. <CardInner>
15. <Text>For Image</Text>
16. </CardInner>
17. <CardInner>
18. <Text>For Button</Text>
19. </CardInner>
20. </CardWrapper>
21. </View>
22. );
23. }
24. }
26. export default VideoList;

So here we created a base design for video listing. No further we will call this component in a file Index.js and pass props of playlist id id from index.js and get it on VideoList.js

If we will keep Play list id from Parse code of VideoList , That will be easy for us to change any time Play List id of youtube and easily we can list any playlist by a quick change


So Now we are going to create Index.js in same component folder. And Add

1. import React, { Component } from ‘react’;
2. import { View } from ‘react-native’;
3. import VideoList from ‘./VideoList’;
5. class Index extends Component {
6. render() {
7. return (
8. <View>
9. <VideoList playlistid=’LLA34Z3lq8FozSQzDHsSLcmQ’ />
10. </View>
11. );
12. }
13. }
14. export default Index;

In this code I imported VideoList component and called it in view component of Index component. You can see I am passing playlistid as props in VideoList component. It is same process which I did in Header Component

Now further we are going to get this playlistid props on VideoList component and print it in console to see what is result

So now we will call Index component in our main App.js file so we can see what is result when app load

So open App.js and import Index component

1. import Index from ‘./src/components/Index’;

Now remove Text component

<Text> Youtube Video </Text>

And add Index component

<Index />

So now its time to refresh simulator again and check what is result .

Great!! We did .

Now we will run debugger in simulator to check our props . So we will call console.log in render method of VideoList.js.

So to run debugger in chrome press command + M button. And select Debug Js Remotely

http://localhost:8081/debugger-ui/ this url will open in chrome. Right click in chrome and open inspect

Click on console

Now we will console.log(this.props.playlistid); in render() { method of VideoList.js

So code will be like this

……
class VideoList extends Component {

 render() {

   console.log(this.props.playlistid);

   return (

…….

Now its time to refresh simulator and check chrome console you will see same playlist id which we passed in props

Well , we are getting play list id of youtube