ting11222001

componentDidMount(){
    axios.get('http://52.198.4.100:5000/accounts/')
    .then(res => {
        if (res.data.length > 0){
            this.setState({
                accounts: res.data.map(account => account.accountname),
                accountname: res.data[0].accountname
            });
        };
    });

ting11222001

export default class CreateDevice extends Component {
    constructor(props) {
        super(props);
        ...
        this.onChangeDate = this.onChangeDate.bind(this);
        this.onSubmit = this.onSubmit.bind(this);

        this.state = {
            accountname:'',
            description: '',

ting11222001

#terminal:
$npm install react-datepicker

...
import DatePicker from 'react-datepicker';
import "react-datepicker/dist/react-datepicker.css";
...

render(){
        return(

ting11222001

render(){
    return(
        <div>
            ...
            <form onSubmit={this.onSubmit}>
            ...
                <div className="form-group"> 
                    <label>Description: </label>
                    <input type="text"
                        required

ting11222001

# terminal:
$npm install axios

import axios from 'axios';

...

onSubmit(e){
    e.preventDefault();
    const device = {

ting11222001

onChangeAccountname(e) {
    this.setState({
        accountname: e.target.value
    });
};

onChangeDescription(e) {
    this.setState({
      description: e.target.value
    });

ting11222001

import React, { Component } from 'react';

export default class CreateDevice extends Component {
    constructor(props) {
        super(props);

        this.state = {
            accountname:'',
            description: '',
            duration: 0,

ting11222001

import React from 'react'; 
import "bootstrap/dist/css/bootstrap.min.css";
import { BrowserRouter as Router, Route } from "react-router-dom";

import Navbar from "./components/navbar.component"
import CreateDevice from "./components/create-device.component";
...

function App() {
  return (

ting11222001

import React, { Component } from 'react';
import { Link } from 'react-router-dom';

export default class Navbar extends Component {

  render() {
    return (
      <nav className="navbar navbar-dark bg-dark navbar-expand-lg">
        <Link to="/" className="navbar-brand">IoT Device Tracker</Link>
        ...

ting11222001

# install
$npm install bootstrap
$npm install react-router-dom

import React from 'react'; 
import "bootstrap/dist/css/bootstrap.min.css";
import { BrowserRouter as Router, Route } from "react-router-dom";