1. import React, { Component } from "react";
2. import { HashRouter as Router, Route, NavLink } from 'react-router-dom';
3. import './index.css'
4.  
5. function start(txt){
6.         var str1 = "First"
7.         if(str1==txt) {
8.                 return null
9.         }
10.         else {
11.                 return
12.                
13.         }
14. }
15.  
16. class Shop extends React.Component {
17.        
18.         constructor() {
19.                 super();
20.                 this.state ={txt: 'First', list: []};
21.                
22.                
23.         }
24.        
25.        
26.         onButtonClick(which) {
27.                 this.load(which);
28.                 this.setState({ txt: 'Clicked!' });
29.         }
30.        
31.         load(which){
32.                 if(which=='0')
33.                 {
34.                         return fetch('/tea/0')
35.                         .then((response) => response.json())
36.                         .then (( responseJson) => {
37.                                 console.log( responseJson)
38.                                 this.setState({
39.                                         list: responseJson.data
40.                                 });
41.                         })
42.                 } else if ( which=='1')
43.                 {
44.                         return fetch('/tea/1')
45.                         .then((response) => response.json())
46.                         .then (( responseJson) => {
47.                                 console.log( responseJson)
48.                                 this.setState({
49.                                         list: responseJson.data
50.                                 });
51.                         })
52.                 }
53.                 else if ( which=='2')
54.                 {
55.                         return fetch('/tea/2')
56.                         .then((response) => response.json())
57.                         .then (( responseJson) => {
58.                                 console.log( responseJson)
59.                                 this.setState({
60.                                         list: responseJson.data
61.                                 });
62.                         })
63.                 }
64.                 else
65.                 {
66.                         return fetch('/tea/3')
67.                         .then((response) => response.json())
68.                         .then (( responseJson) => {
69.                                 console.log( responseJson)
70.                                 this.setState({
71.                                         list: responseJson.data
72.                                 });
73.                         })
74.                 }
75.         }
76.        
77.  
78.  
79.   render() {
80.        
81.         var test = "First"
82.     return (
83.       <div>
84.                                
85.                 {this.state.txt==test &&
86.                 <div class="row">
87.                 <div class="col-lg-6">
88.                 <div class="bg-faded p-4 my-4">
89.         <div class="card card-inverse">
90.           <img class="card-img img-fluid w-100" src="img/black-tea.jpg" alt=""></img>
91.           <div class="card-img-overlay bg-overlay">
92.             <h2 class="card-title text-shadow text-white text-uppercase mb-0">Black Tea</h2>
93.             <h4 class="text-shadow text-white"></h4>
94.             <button onClick={() => this.onButtonClick(0)}        class="btn btn-secondary">Taste it</button>
95.           </div>
96.         </div>         
97.                 </div>
98.                 </div>
99.                
100.                 <div class="col-lg-6">
101.                 <div class="bg-faded p-4 my-4">
102.         <div class="card card-inverse">
103.           <img class="card-img img-fluid w-100" src="img/green-tea.jpg" alt=""></img>
104.           <div class="card-img-overlay bg-overlay">
105.             <h2 class="card-title text-shadow text-white text-uppercase mb-0">Green Tea</h2>
106.             <h4 class="text-shadow text-white"></h4>
107.             <button onClick={() => this.onButtonClick(1)}        class="btn btn-secondary">Taste it</button>
108.           </div>
109.         </div>         
110.                 </div>
111.                 </div>
112.                 </div>
113.                 }
114.                
115.                 {this.state.txt==test &&
116.                 <div class="row">
117.                 <div class="col-lg-6">
118.                 <div class="bg-faded p-4 my-4">
119.         <div class="card card-inverse">
120.           <img class="card-img img-fluid w-100" src="img/herbal-tea.jpg" alt=""></img>
121.           <div class="card-img-overlay bg-overlay">
122.             <h2 class="card-title text-shadow text-white text-uppercase mb-0">Herbal Tea</h2>
123.             <h4 class="text-shadow text-white"></h4>
124.             <button onClick={() => this.onButtonClick(2)} class="btn btn-secondary">Taste it</button>
125.           </div>
126.         </div>         
127.                 </div>
128.                 </div>
129.                
130.                 <div class="col-lg-6">
131.                 <div class="bg-faded p-4 my-4">
132.         <div class="card card-inverse">
133.           <img class="card-img img-fluid w-100" src="img/fruit-tea.jpg" alt=""></img>
134.           <div class="card-img-overlay bg-overlay">
135.             <h2 class="card-title text-shadow text-white text-uppercase mb-0">Fruit Tea</h2>
136.             <h4 class="text-shadow text-white"></h4>
137.             <button onClick={() => this.onButtonClick(3)} class="btn btn-secondary">Taste it</button>
138.           </div>
139.         </div>         
140.                 </div>
141.                 </div>
142.                 </div>
143.                 }
144.                
145.                 {this.state.txt!=test &&
146.                 <div>      
147.          
148.        
149.                        
150.                         {this.state.list.map(function(name){
151.                                 return  <div class="col-lg-12">
152.                                                 <div class="col-lg-4">
153.                                                 <div class="bg-faded p-4 my-4">
154.                                                         <div class="card card-inverse">
155.                                                         <img class="card-img img-fluid w-100" src="img/fruit-tea.jpg" alt=""></img>
156.                                                         <div class="card-img-overlay bg-overlay">
157.                                                        
158.                                                         </div>
159.                                                         </div>
160.                                                 </div>
161.                                                 </div>
162.                                                 <div class="col-lg-8">
163.                                                         <h1 className="Name">{name.name}</h1>
164.                                                         <h3>{name.description}</h3>
165.                                                 </div>
166.                                                
167.                                                
168.                                                 </div>
169.        
170.                         })}
171.                        
172.                                        
173.  
174.                 </div>
175.                 }
176.                
177.                     
178.       </div>
179.     );
180.   }
181. }
182.  
183. export default Shop