Skip to content
Permalink
Browse files

Control led state with a toggle button

  • Loading branch information...
lasselukkari committed Mar 19, 2019
1 parent 9e7ba2e commit 9b23e6c13056d05a277a96d14531982926a01623
Showing with 25 additions and 11 deletions.
  1. +25 −11 src/App.js
@@ -1,24 +1,38 @@
import React, { Component } from 'react';
import ToggleButton from 'react-toggle-button';
import logo from './logo.svg';
import './App.css';

class App extends Component {
constructor(props) {
super(props);
this.state = { ledOn: false };
}

setLedState(state) {
this.setState({ ledOn: state !== '0' })
}

componentDidMount() {
fetch('/led')
.then(response => response.text())
.then(state => this.setLedState(state));
}

handleStateChange(ledOn) {
fetch('/led', { method: 'PUT', body: ledOn ? '0' : '1' })
.then(response => response.text())
.then(state => this.setLedState(state));
}
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
<ToggleButton
value={this.state.ledOn}
onToggle={value => this.handleStateChange(value)}
/>
</header>
</div>
);

0 comments on commit 9b23e6c

Please sign in to comment.
You can’t perform that action at this time.