-
Notifications
You must be signed in to change notification settings - Fork 1
/
App.jsx
90 lines (79 loc) · 2.36 KB
/
App.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
import React, { Component } from 'react';
import { render } from 'react-dom';
import { Brew, Dairy, Else, Drink } from './headers.jsx';
import './styles.css';
class App extends Component {
constructor(props) {
super(props)
this.state = {
// coffee: false,
// espresso: false,
// steamedMilk: false,
// frothedMilk: false,
// foamedMilk: false,
// condensedMilk:false,
// cream: false,
// whippedCream: false,
// iceCream: false,
// sugar: false,
// alcohol: false,
// water: false,
// chocolate: false
}
this.handleSubmit = this.handleSubmit.bind(this)
}
handleSubmit = event => {
event.preventDefault()
console.log('in handleSubmit')
console.log('state', this.state)
fetch('/api', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({...this.state})
})
.then(res => res.json())
.then(data => {
// console.log('data', data.drinks[0])
if (!data.length) alert ('Sorry, can\'t find your drink combination. Try again!')
const arr = []
for (let i = 0; i < data.drinks.length; i++) {
arr.push(<Drink key={data.drinks[i]._id} drink={data.drinks[i]} />)
}
// console.log('arr', arr)
this.setState({arr:[...arr]})
// console.log('state', this.state)
return arr
})
.catch(err => console.log(err))
}
handleChange = event => {
if (event.target.checked) this.setState({ ...this.state, [event.target.value]: true })
else {
this.setState({...this.state, [event.target.value]:false})
}
}
render() {
// console.log('state', this.state) //-> state does get populated onChange
return (
<div className='selection'>
<form onSubmit={this.handleSubmit}>
<Brew handleChange={this.handleChange}/>
<Dairy handleChange={this.handleChange}/>
<Else handleChange={this.handleChange}/>
<button type='submit' id='button'>What's My Drink?</button>
<div id='drinkOrder'>
<fieldset id='orders'>
<legend className='orders'>DRINK ORDERS</legend>
<div className='drinkOrder'>
{this.state.arr}
</div>
</fieldset>
</div>
</form>
</div>
)
}
};
export default App;