Frames

Untitled

0
1
1import React from "react";
2import "./App.scss";
asdfasdfasd

3
4import gradesJson from '../data/grades.json';
5
6import Grade from './Grade';
7import Nav from './Nav';
8import Aside from './Aside';
9
10class App extends React.Component {
11 constructor(props) {
12 super(props);
13 this.state = {
14 index: 0,
15 kanji: {
16 word: gradesJson.grades[0][0],
17 active: true
18 }
19 };
20 this.changeGrade = this.changeGrade.bind(this);
21 this.viewKanji = this.viewKanji.bind(this);
22 }
23
24 changeGrade(index) {
25 this.setState({ index: index });
26 }
27
28 viewKanji(word) {
29 let self = this;
30
31 this.setState({
32 kanji: { word: word, active: false }
33 });
34
35 setTimeout(() => {
36 self.setState({ kanji: { active: true, word: word } });
37 }, 100);
38 }
39
40 render() {
41 const { index, kanji } = this.state;
42 return (
43 <div className="app">
44 <Aside kanji={this.state.kanji} />
45 <div>
46 <Nav onChangeGrade={this.changeGrade} />
47 <Grade onViewKanji={this.viewKanji} index={index} kanji={kanji} />
48 </div>
49 </div>
50 );
51 }
52}
53
54export default App;
55