Skip to content

Commit e98c33b

Browse files
alexloberaalexlobera
committed
refactores setState(state,props => ...)
1 parent 5fff2b5 commit e98c33b

1 file changed

Lines changed: 91 additions & 41 deletions

File tree

‎src/components/App.js‎

Lines changed: 91 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,50 @@
1-
import React from 'react'
1+
import React from "react";
22

3-
import Menu from './Navigations/Menu'
4-
import Header from './Header'
5-
import books from '../mocks/books'
3+
import Menu from "./Navigations/Menu";
4+
import Header from "./Header";
5+
import books from "../mocks/books";
66

77
class App extends React.Component {
88
constructor() {
9-
super()
9+
super();
1010
this.state = {
1111
books: books,
12-
selectedFilter: 'All',
12+
selectedFilter: "All",
1313
menu: { open: false }
14-
}
14+
};
1515
}
1616

1717
toggleMenu = () => {
18-
this.setState({ menu: { open: !this.state.menu.open } })
19-
}
18+
this.setState(state => ({
19+
menu: { open: !state.menu.open }
20+
}));
21+
};
2022

21-
selectFilter = (filter) => {
23+
selectFilter = filter => {
2224
this.setState({
2325
selectedFilter: filter,
24-
books: filter === 'All' ? books : books.filter(book => (book.category === filter))
25-
})
26-
}
26+
books:
27+
filter === "All"
28+
? books
29+
: books.filter(book => book.category === filter)
30+
});
31+
};
2732

2833
render() {
29-
const filters = [
30-
'All',
31-
'Web',
32-
'Mobile',
33-
'DevOps',
34-
'Essentials',
35-
]
34+
const filters = ["All", "Web", "Mobile", "DevOps", "Essentials"];
3635

3736
const tabItems = filters.map(filter => (
38-
<li className={filter === this.state.selectedFilter ? 'active' : ''} key={filter} onClick={() => this.selectFilter(filter)}>
37+
<li
38+
className={filter === this.state.selectedFilter ? "active" : ""}
39+
key={filter}
40+
onClick={() => this.selectFilter(filter)}
41+
>
3942
<a href="#0">{filter}</a>
4043
</li>
41-
))
44+
));
4245

4346
return (
4447
<div id="page-wrap">
45-
4648
<Menu
4749
pageWrapId="page-wrap"
4850
isOpen={this.state.menu.open}
@@ -59,8 +61,11 @@ class App extends React.Component {
5961
<a href="#about">About us</a>
6062
</li>
6163
<li>
62-
<button onClick={this.toggleMenu} className="btn btn-lg btn-outline">
63-
<i className="fa fa-graduation-cap"></i> <span>Training</span>
64+
<button
65+
onClick={this.toggleMenu}
66+
className="btn btn-lg btn-outline"
67+
>
68+
<i className="fa fa-graduation-cap" /> <span>Training</span>
6469
</button>
6570
</li>
6671
</ul>
@@ -79,9 +84,7 @@ class App extends React.Component {
7984
</div>
8085
<div className="row">
8186
<div className="col-lg-12">
82-
<ul className="nav nav-pills text-center">
83-
{tabItems}
84-
</ul>
87+
<ul className="nav nav-pills text-center">{tabItems}</ul>
8588
</div>
8689
</div>
8790
<div className="row book-list">
@@ -106,15 +109,33 @@ class App extends React.Component {
106109
</div>
107110
<div className="row">
108111
<div className="col-lg-4 col-lg-offset-2">
109-
<p>This library is an exercise for building UI in a <strong style={{ textDecoration: 'underline' }}>declarative way</strong>. This web site will help you understand the fundamental piece of ReactJS, components. You'll learn how to break an app in components (AKA componentization) and flow data accross them.</p>
112+
<p>
113+
This library is an exercise for building UI in a{" "}
114+
<strong style={{ textDecoration: "underline" }}>
115+
declarative way
116+
</strong>
117+
. This web site will help you understand the fundamental piece
118+
of ReactJS, components. You'll learn how to break an app in
119+
components (AKA componentization) and flow data accross them.
120+
</p>
110121
</div>
111122
<div className="col-lg-4">
112-
<p>This ReactJS web site works, but it's not well implemented. The problem, the developer didn't think in React and there aren't many components. We challenge you to fork the repo an componentizise the app to unleash the power of ReactJS.</p>
123+
<p>
124+
This ReactJS web site works, but it's not well implemented.
125+
The problem, the developer didn't think in React and there
126+
aren't many components. We challenge you to fork the repo an
127+
componentizise the app to unleash the power of ReactJS.
128+
</p>
113129
</div>
114130
<div className="col-lg-8 col-lg-offset-2 text-center">
115-
<a target="_blank" rel="noopener noreferrer" href="https://github.com/leanjscom/thinking-in-react" className="btn btn-lg btn-outline">
116-
<i className="fa fa-code-fork"></i> Fork me on Github
117-
</a>
131+
<a
132+
target="_blank"
133+
rel="noopener noreferrer"
134+
href="https://github.com/leanjscom/thinking-in-react"
135+
className="btn btn-lg btn-outline"
136+
>
137+
<i className="fa fa-code-fork" /> Fork me on Github
138+
</a>
118139
</div>
119140
</div>
120141
</div>
@@ -136,13 +157,34 @@ class App extends React.Component {
136157
<h3>Around the Web</h3>
137158
<ul className="list-inline">
138159
<li>
139-
<a target="_blank" rel="noopener noreferrer" href="https://github.com/leanjscom" className="btn-social btn-outline"><i className="fa fa-fw fa-github"></i></a>
160+
<a
161+
target="_blank"
162+
rel="noopener noreferrer"
163+
href="https://github.com/leanjscom"
164+
className="btn-social btn-outline"
165+
>
166+
<i className="fa fa-fw fa-github" />
167+
</a>
140168
</li>
141169
<li>
142-
<a target="_blank" rel="noopener noreferrer" href="https://twitter.com/leanjscom" className="btn-social btn-outline"><i className="fa fa-fw fa-twitter"></i></a>
170+
<a
171+
target="_blank"
172+
rel="noopener noreferrer"
173+
href="https://twitter.com/leanjscom"
174+
className="btn-social btn-outline"
175+
>
176+
<i className="fa fa-fw fa-twitter" />
177+
</a>
143178
</li>
144179
<li>
145-
<a target="_blank" rel="noopener noreferrer" href="https://www.instagram.com/leanjscom/" className="btn-social btn-outline"><i className="fa fa-fw fa-instagram"></i></a>
180+
<a
181+
target="_blank"
182+
rel="noopener noreferrer"
183+
href="https://www.instagram.com/leanjscom/"
184+
className="btn-social btn-outline"
185+
>
186+
<i className="fa fa-fw fa-instagram" />
187+
</a>
146188
</li>
147189
</ul>
148190
</div>
@@ -151,8 +193,9 @@ class App extends React.Component {
151193
<p>
152194
<a href="https://reactjs.academy/">ReactJS Academy</a>
153195
<span>
154-
ReactJS Academy is Europes longest running dedicated React, Redux, and GraphQL training.
155-
</span>
196+
ReactJS Academy is Europes longest running dedicated
197+
React, Redux, and GraphQL training.
198+
</span>
156199
</p>
157200
</div>
158201
</div>
@@ -162,15 +205,22 @@ class App extends React.Component {
162205
<div className="container">
163206
<div className="row">
164207
<div className="col-lg-12">
165-
<span>Copyright &copy;</span> <a href="https://leanjs.com/" target="_blank" rel="noopener noreferrer">LeanJS</a>
208+
<span>Copyright &copy;</span>{" "}
209+
<a
210+
href="https://leanjs.com/"
211+
target="_blank"
212+
rel="noopener noreferrer"
213+
>
214+
LeanJS
215+
</a>
166216
</div>
167217
</div>
168218
</div>
169219
</div>
170220
</footer>
171221
</div>
172-
)
222+
);
173223
}
174224
}
175225

176-
export default App
226+
export default App;

0 commit comments

Comments
 (0)