import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

import IdleTimer from 'react-idle-timer';
import { Form, FormGroup, FormControl, ControlLabel, Modal, HelpBlock, Alert } from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/css/bootstrap-theme.css';

class App extends Component {
  constructor(props) {
    super(props);

    this.save = this.save.bind(this);
  }

  save() {
    console.log("Saving data...");
  }

  render() {
    return (
      <IdleTimer ref="idleTimer" timeout={3000} startOnLoad={false} idleAction={this.save}>
        <div className="App">
          <div className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
            <h2>Edit User</h2>
          </div>
          <div>
            <Form>
              <FormGroup controlId="nameGroup">
                <ControlLabel>Name:</ControlLabel>
                <FormControl typeof="text" placeholder="Name" />
                <FormControl.Feedback />
                <HelpBlock>Enter full name</HelpBlock>
              </FormGroup>
              <FormGroup controlId="emailGroup">
                <ControlLabel>Email:</ControlLabel>
                <FormControl typeof="text" placeholder="user@example.com" />
                <FormControl.Feedback />
                <HelpBlock>Enter email address</HelpBlock>
              </FormGroup>
            </Form>
          </div>
        </div>
      </IdleTimer>
    );
  }
}

export default App;

@@ -411,86 +411,568 @@
 is.s
-ave = this.save.bind(this);%0A  %7D%0A%0A  save() %7B%0A    console.log(%22Saving data...%22);
+tate = %7B%0A      name: '',%0A      email: '',%0A      hasChanges: false%0A    %7D%0A%0A    this.handleNameChange = this.handleNameChange.bind(this);%0A    this.handleEmailChange = this.handleEmailChange.bind(this);%0A    this.save = this.save.bind(this);%0A  %7D%0A%0A  handleNameChange(e) %7B%0A    this.setState(%7B name: e.target.value, hasChanges: true %7D);%0A  %7D%0A%0A  handleEmailChange(e) %7B%0A    this.setState(%7B email: e.target.value, hasChanges: true %7D);%0A  %7D%0A%0A  save() %7B%0A    console.log(%22Saving data...%22);%0A    if (this.state.hasChanges)%0A    %7B%0A      this.setState(%7B hasChanges: false %7D);%0A    %7D
 %0A  %7D
@@ -1451,27 +1451,168 @@
 ext%22
- placeholder=%22Name%22
+%0A                            value=%7Bthis.state.name%7D%0A                            placeholder=%22Name%22%0A                            onChange=%7Bthis.handleNameChange%7D
  /%3E%0A
@@ -1881,39 +1881,182 @@
 ext%22
- placeholder=%22user@example.com%22
+%0A                            value=%7Bthis.state.email%7D%0A                            placeholder=%22user@example.com%22%0A                            onChange=%7Bthis.handleEmailChange%7D
  /%3E%0A

Add state and event handlers.