12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061 |
- import React from 'react';
- import User from './User';
- import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
- import Navigation from './Navigation';
- import Footer from './Footer';
- import Home from './Home';
- import About from './About';
- export class App extends React.Component{
- constructor(props){
- super(props)
- this.state = {
- userList: [
- {name: "Hugo", counter: 0},
- {name: "Bert", counter: 0},
- {name: "Sepp", counter: 0},
- {name: "Lisa", counter: 0},
- {name: "Susi", counter: 0},
-
- ]
- }
- }
-
- doClick(idx){
- let listCopy = this.state.userList.slice();
- listCopy[idx].counter++;
- this.setState({userList: listCopy})
- }
-
- hello(){
- return <p>hello</p>
- }
-
- render(){
- return (
- <div>
- <Router>
- <Navigation />
- <Switch>
- <Route path="/" exact component={Home} />
- <Route path="/about" exact component={About} />
- </Switch>
- <Footer />
- </Router>
-
- {this.props.title}
- {this.state.userList.map((user, idx) =>
- <User
- name={user.name}
- counter={user.counter}
- doClick={() => this.doClick(idx)}
- app={this}
- title={this.props.title}
- />
- )}
- </div>
- )
- }
- }
|