1
- import React , { Component } from 'react'
1
+ import React , { Component } from 'react'
2
2
import ReactImageFallback from "react-image-fallback" ;
3
3
import data from '../response/response'
4
4
@@ -8,86 +8,86 @@ import loader from '../assets/loader.gif';
8
8
import mentorImage from '../assets/mentor-default.svg' ;
9
9
10
10
11
- class MentorProfile extends Component {
11
+ class MentorProfile extends Component {
12
12
13
- state = {
13
+ state = {
14
14
mentorId : null ,
15
- mentorProfile :null
15
+ mentorProfile : null
16
16
}
17
17
18
- componentDidMount ( ) {
18
+ componentDidMount ( ) {
19
19
let id = this . props . match . params . mentorId ;
20
-
20
+
21
21
this . setState ( {
22
- mentorId :id ,
22
+ mentorId : id ,
23
23
// eslint-disable-next-line
24
- mentorProfile : data . filter ( item => item . id == id ) [ 0 ]
24
+ mentorProfile : data . filter ( item => item . id == id ) [ 0 ]
25
25
} ) ;
26
-
26
+
27
27
}
28
-
28
+
29
29
30
30
render ( ) {
31
- const hasProfileData = this . state . mentorProfile ? ( < div >
32
- < div className = "row mt-5 no-gutters" >
33
- < div className = "col-sm-4 col-md-4 " >
34
- < ReactImageFallback
35
- src = { this . state . mentorProfile . image }
36
- fallbackImage = { mentorImage } //this shows if the montor does not have any image
37
- initialImage = { loader }
38
- alt = { this . state . mentorProfile . name }
39
- className = "card-img mentor-img-thumbnail img-fluid" />
40
-
41
- </ div >
42
-
43
- < div className = "col-md-8" >
44
- < div className = "card-body" >
45
- < h4 className = "card-title" > { this . state . mentorProfile . name } </ h4 >
46
- < p className = "card-text" > < small className = "text-muted" > { this . state . mentorProfile . country } </ small > </ p >
47
- < p className = "card-text" > { this . state . mentorProfile . biography } </ p >
48
- < p className = "card-text " > { this . state . mentorProfile . technology } </ p >
31
+ const hasProfileData = this . state . mentorProfile ? ( < div >
32
+ < div className = "row mt-5 no-gutters" >
33
+ < div className = "col-sm-4 col-md-4 " >
34
+ < ReactImageFallback
35
+ src = { this . state . mentorProfile . image }
36
+ fallbackImage = { mentorImage } //this shows if the montor does not have any image
37
+ initialImage = { loader }
38
+ alt = { this . state . mentorProfile . name }
39
+ className = "card-img mentor-img-thumbnail img-fluid" />
40
+
41
+ </ div >
42
+
43
+ < div className = "col-md-8" >
44
+ < div className = "card-body" >
45
+ < h4 className = "card-title" > { this . state . mentorProfile . name } </ h4 >
46
+ < p className = "card-text" > < small className = "text-muted" > { this . state . mentorProfile . country } </ small > </ p >
47
+ < p className = "card-text" > { this . state . mentorProfile . biography } </ p >
48
+ < p className = "card-text " > { this . state . mentorProfile . technology } </ p >
49
49
50
+ </ div >
51
+ </ div >
50
52
</ div >
51
- </ div >
52
- </ div >
53
- < div className = "row mt-3 no-gutters" >
54
- < div >
55
- < h5 className = "card-title" > Technology Stack</ h5 >
56
- < div className = "" >
57
- {
58
- this . state . mentorProfile . technology . split ( ',' ) . map ( ( item , key ) => {
59
- let programmingLanguage = item . toLowerCase ( ) ;
60
-
61
- ///below are icons generated by devicon
62
- return < i key = { key } className = { `devicon-${ programmingLanguage . trim ( ) } -plain colored` } > </ i >
63
-
64
- //if you would like to use Font Mfizz vector icons uncomment the line bellow
65
- // return<i key={key} className={`icon-${programmingLanguage.trim()}`}></i>
66
-
67
-
68
-
69
- } )
70
- }
71
-
72
-
53
+ < div className = "row mt-3 no-gutters" >
54
+ < div >
55
+ < h5 className = "card-title" > Technology Stack</ h5 >
56
+ < div className = "" >
57
+ {
58
+ this . state . mentorProfile . technology . split ( ',' ) . map ( ( item , key ) => {
59
+ let programmingLanguage = item . toLowerCase ( ) ;
60
+
61
+ ///below are icons generated by devicon
62
+ return < i key = { key } className = { `devicon-${ programmingLanguage . trim ( ) } -plain colored` } > </ i >
63
+
64
+ //if you would like to use Font Mfizz vector icons uncomment the line bellow
65
+ // return<i key={key} className={`icon-${programmingLanguage.trim()}`}></i>
66
+
67
+
68
+
69
+ } )
70
+ }
71
+
72
+
73
+ </ div >
74
+ </ div >
75
+
73
76
</ div >
74
- </ div >
75
-
76
- </ div >
77
- </ div > ) : ( < h2 > Loading Data</ h2 > )
77
+ </ div > ) : ( < h2 > Loading Data</ h2 > )
78
+
78
79
79
-
80
80
return (
81
- < div >
82
- < Header />
83
- < div className = "container" >
84
-
85
- { hasProfileData }
86
-
81
+ < div >
82
+ < Header />
83
+ < div className = "container" >
84
+
85
+ { hasProfileData }
86
+
87
+ </ div >
87
88
</ div >
88
- </ div >
89
89
)
90
- }
90
+ }
91
91
}
92
92
93
93
export default MentorProfile ;
0 commit comments