Commit 5d37e818 authored by Jiawen Lyu's avatar Jiawen Lyu

make list and input to be components

parent 14928184
......@@ -7,6 +7,8 @@ import "./App.css";
import withFetchData from "./HOC/withFetchData";
import withUVs from "./HOC/withUVs";
import { LoginInput } from "./components/LoginInput";
import { StudentsList } from "./components/StudentsList";
const SchedulerWithData = withFetchData(withUVs(Scheduler))
......@@ -16,6 +18,7 @@ class App extends Component {
messages: [],
error: null,
isLoaded: false,
logins: [],
uvs: []
};
addMessage(message) {
......@@ -35,6 +38,13 @@ class App extends Component {
this.addMessage(message);
};
addLogin = (e) => {
this.setState({
logins: [...this.state.logins, e.target.value]
})
}
render() {
const { currentTimeFormatState, messages } = this.state;
return (
......@@ -54,34 +64,18 @@ class App extends Component {
<div class="left-content">
<div class="row">
<div class="col">
<form>
<div class="row">
<label for="exampleInputEmail1">Login</label>
</div>
<div class="row">
<div class="col">
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" />
</div>
<div class="col">
<button type="submit" class="btn btn-primary btn-sm">Submit</button>
</div>
</div>
</form>
<LoginInput
handleClick={this.addLogin}
/>
</div>
</div>
<div class="row" />
<div class="row">
<label for="exampleInputEmail1">Current students</label>
<label for="exampleInputEmail1">Current students:</label>
</div>
<div class="row">
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
<StudentsList />
</div>
</div>
......
import React from 'react';
export const LoginInput = (props) => {
return (
<>
<form>
<div class="row">
<label for="exampleInputEmail1">Login</label>
</div>
<div class="row">
<div class="col">
<input class="form-control" id="exampleInputEmail1" />
</div>
<div class="col">
<button
type="submit"
class="btn btn-primary btn-sm"
onClick={props.handleClick}
>
Submit
</button>
</div>
</div>
</form>
</>
)
}
\ No newline at end of file
import React from 'react';
export const StudentsList = (props) => {
return (
<>
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</>
)
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment