FabricTodo.js

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;