Skip to content

Instantly share code, notes, and snippets.

@micahgodbolt
Last active May 3, 2017 14:16
Show Gist options
  • Save micahgodbolt/198e6b5c06c9407541457f30136f2e79 to your computer and use it in GitHub Desktop.
Save micahgodbolt/198e6b5c06c9407541457f30136f2e79 to your computer and use it in GitHub Desktop.
import React, { Component } from 'react';
import './App.css';
import { TextField, PrimaryButton, Checkbox, ProgressIndicator} from "office-ui-fabric-react";
class App extends Component {
constructor(props) {
super(props);
this.state = {
todo: null
}
}
render() {
return (
<div className="App">
<TextField
label="Enter todo"
ref={ (t) => this.field = t}
/>
<PrimaryButton
text="Add Todo"
onClick={() => this.addTodo(this.field._latestValue)}
/>
{ this.state.todo &&
<Checkbox
label={ this.state.todo}
onChange={() => this.remoteTodo()}
/>
}
<ProgressIndicator
label="Todos Done"
percentComplete= { this.state.todo ? 1 : 0 }
/>
</div>
);
}
addTodo = (todo) => {
this.setState( {
todo
})
}
remoteTodo = () => {
this.setState( {
todo: null
})
}
}
export default App;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment