Guest User

Untitled

a guest
Sep 4th, 2018
170
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.45 KB | None | 0 0
  1. const UserItem = (user, index) => (
  2. <div key={index} className="accordion__item js-accordion-item">
  3. <div className="accordion-header js-accordion-header">{(index+1)} . {user.name}
  4. </div>
  5. <div className="accordion-body js-accordion-body">
  6. <div className="accordion-body__contents">
  7. {JSON.stringify(user.address.street)}}
  8. <a href="#" onClick={handleClick}>
  9. Click me
  10. </a>
  11. </div>
  12. <div className="accordion js-accordion">
  13. <div className="accordion__item js-accordion-item">
  14. <div className="accordion-header js-accordion-header">From</div>
  15. <div className="accordion-body js-accordion-body">
  16. <div className="accordion-body__contents">
  17. Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos sequi placeat distinctio dolor,
  18. amet magnam voluptatibus eos ex vero, sunt veritatis esse. Nostrum voluptatum et repudiandae vel sed,
  19. explicabo in?
  20. </div>
  21. </div>
  22. </div>
  23. <div className="accordion__item js-accordion-item">
  24. <div className="accordion-header js-accordion-header">Sub Panel 2</div>
  25. <div className="accordion-body js-accordion-body">
  26. <div className="accordion-body__contents">
  27. Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos sequi placeat distinctio dolor,
  28. amet magnam voluptatibus eos ex vero, sunt veritatis esse. Nostrum voluptatum et repudiandae vel sed,
  29. explicabo in?
  30. </div>
  31. </div>
  32. </div>
  33. </div>
  34. </div>
  35. </div>
  36.  
  37. );
  38.  
  39. [{
  40. "id": 1,
  41. "name": "Leanne Graham",
  42. "username": "Bret",
  43. "email": "Sincere@april.biz",
  44. "address": {
  45. "street": "Kulas Light",
  46. "suite": "Apt. 556",
  47. "city": "Gwenborough",
  48. "zipcode": "92998-3874",
  49. "geo": {
  50. "lat": "-37.3159",
  51. "lng": "81.1496"
  52. }
  53. },
  54. "phone": "1-770-736-8031 x56442",
  55. "website": "hildegard.org",
  56. "company": {
  57. "name": "Romaguera-Crona",
  58. "catchPhrase": "Multi-layered client-server neural-net",
  59. "bs": "harness real-time e-markets"
  60. }
  61. },
  62. {
  63. "id": 2,
  64. "name": "Ervin Howell",
  65. "username": "Antonette",
  66. "email": "Shanna@melissa.tv",
  67. "address": {
  68. "street": "Victor Plains",
  69. "suite": "Suite 879",
  70. "city": "Wisokyburgh",
  71. "zipcode": "90566-7771",
  72. "geo": {
  73. "lat": "-43.9509",
  74. "lng": "-34.4618"
  75. }
  76. },
  77. "phone": "010-692-6593 x09125",
  78. "website": "anastasia.net",
  79. "company": {
  80. "name": "Deckow-Crist",
  81. "catchPhrase": "Proactive didactic contingency",
  82. "bs": "synergize scalable supply-chains"
  83. }
  84. },
  85. {
  86. "id": 3,
  87. "name": "Clementine Bauch",
  88. "username": "Samantha",
  89. "email": "Nathan@yesenia.net",
  90. "address": {
  91. "street": "Douglas Extension",
  92. "suite": "Suite 847",
  93. "city": "McKenziehaven",
  94. "zipcode": "59590-4157",
  95. "geo": {
  96. "lat": "-68.6102",
  97. "lng": "-47.0653"
  98. }
  99. },
  100. "phone": "1-463-123-4447",
  101. "website": "ramiro.info",
  102. "company": {
  103. "name": "Romaguera-Jacobson",
  104. "catchPhrase": "Face to face bifurcated interface",
  105. "bs": "e-enable strategic applications"
  106. }
  107. },
  108. {
  109. "id": 4,
  110. "name": "Patricia Lebsack",
  111. "username": "Karianne",
  112. "email": "Julianne.OConner@kory.org",
  113. "address": {
  114. "street": "Hoeger Mall",
  115. "suite": "Apt. 692",
  116. "city": "South Elvis",
  117. "zipcode": "53919-4257",
  118. "geo": {
  119. "lat": "29.4572",
  120. "lng": "-164.2990"
  121. }
  122. },
  123. "phone": "493-170-9623 x156",
  124. "website": "kale.biz",
  125. "company": {
  126. "name": "Robel-Corkery",
  127. "catchPhrase": "Multi-tiered zero tolerance productivity",
  128. "bs": "transition cutting-edge web services"
  129. }
  130. },
  131. {
  132. "id": 5,
  133. "name": "Chelsey Dietrich",
  134. "username": "Kamren",
  135. "email": "Lucio_Hettinger@annie.ca",
  136. "address": {
  137. "street": "Skiles Walks",
  138. "suite": "Suite 351",
  139. "city": "Roscoeview",
  140. "zipcode": "33263",
  141. "geo": {
  142. "lat": "-31.8129",
  143. "lng": "62.5342"
  144. }
  145. },
  146. "phone": "(254)954-1289",
  147. "website": "demarco.info",
  148. "company": {
  149. "name": "Keebler LLC",
  150. "catchPhrase": "User-centric fault-tolerant solution",
  151. "bs": "revolutionize end-to-end systems"
  152. }
  153. },
  154. {
  155. "id": 6,
  156. "name": "Mrs. Dennis Schulist",
  157. "username": "Leopoldo_Corkery",
  158. "email": "Karley_Dach@jasper.info",
  159. "address": {
  160. "street": "Norberto Crossing",
  161. "suite": "Apt. 950",
  162. "city": "South Christy",
  163. "zipcode": "23505-1337",
  164. "geo": {
  165. "lat": "-71.4197",
  166. "lng": "71.7478"
  167. }
  168. },
  169. "phone": "1-477-935-8478 x6430",
  170. "website": "ola.org",
  171. "company": {
  172. "name": "Considine-Lockman",
  173. "catchPhrase": "Synchronised bottom-line interface",
  174. "bs": "e-enable innovative applications"
  175. }
  176. },
  177. {
  178. "id": 7,
  179. "name": "Kurtis Weissnat",
  180. "username": "Elwyn.Skiles",
  181. "email": "Telly.Hoeger@billy.biz",
  182. "address": {
  183. "street": "Rex Trail",
  184. "suite": "Suite 280",
  185. "city": "Howemouth",
  186. "zipcode": "58804-1099",
  187. "geo": {
  188. "lat": "24.8918",
  189. "lng": "21.8984"
  190. }
  191. },
  192. "phone": "210.067.6132",
  193. "website": "elvis.io",
  194. "company": {
  195. "name": "Johns Group",
  196. "catchPhrase": "Configurable multimedia task-force",
  197. "bs": "generate enterprise e-tailers"
  198. }
  199. },
  200. {
  201. "id": 8,
  202. "name": "Nicholas Runolfsdottir V",
  203. "username": "Maxime_Nienow",
  204. "email": "Sherwood@rosamond.me",
  205. "address": {
  206. "street": "Ellsworth Summit",
  207. "suite": "Suite 729",
  208. "city": "Aliyaview",
  209. "zipcode": "45169",
  210. "geo": {
  211. "lat": "-14.3990",
  212. "lng": "-120.7677"
  213. }
  214. },
  215. "phone": "586.493.6943 x140",
  216. "website": "jacynthe.com",
  217. "company": {
  218. "name": "Abernathy Group",
  219. "catchPhrase": "Implemented secondary concept",
  220. "bs": "e-enable extensible e-tailers"
  221. }
  222. },
  223. {
  224. "id": 9,
  225. "name": "Glenna Reichert",
  226. "username": "Delphine",
  227. "email": "Chaim_McDermott@dana.io",
  228. "address": {
  229. "street": "Dayna Park",
  230. "suite": "Suite 449",
  231. "city": "Bartholomebury",
  232. "zipcode": "76495-3109",
  233. "geo": {
  234. "lat": "24.6463",
  235. "lng": "-168.8889"
  236. }
  237. },
  238. "phone": "(775)976-6794 x41206",
  239. "website": "conrad.com",
  240. "company": {
  241. "name": "Yost and Sons",
  242. "catchPhrase": "Switchable contextually-based project",
  243. "bs": "aggregate real-time technologies"
  244. }
  245. },
  246. {
  247. "id": 10,
  248. "name": "Clementina DuBuque",
  249. "username": "Moriah.Stanton",
  250. "email": "Rey.Padberg@karina.biz",
  251. "address": {
  252. "street": "Kattie Turnpike",
  253. "suite": "Suite 198",
  254. "city": "Lebsackbury",
  255. "zipcode": "31428-2261",
  256. "geo": {
  257. "lat": "-38.2386",
  258. "lng": "57.2232"
  259. }
  260. },
  261. "phone": "024-648-3804",
  262. "website": "ambrose.net",
  263. "company": {
  264. "name": "Hoeger LLC",
  265. "catchPhrase": "Centralized empowering task-force",
  266. "bs": "target end-to-end models"
  267. }
  268. }
  269. ]
  270.  
  271. <div className="accordion-body__contents">
  272. {user.address.street}
  273. <a href="#" onClick={handleClick}>
  274. Click me
  275. </a>
  276. </div>
Add Comment
Please, Sign In to add comment