import React, { Component } from 'react';
import './App.css';
class App extends Component {
  state = { streams: [] }
  componentDidMount() {
    fetch('/getStreams')
      .then(res => res.json())
      .then(streams => this.setState({ streams }));
  }
  render() {
    return (
      <section class="container">
        <div class="left-half">
          <article>
            <h1>Servers</h1>
            {this.state.streams.map(stream =>
              <div key={stream.StreamName}>{stream.StreamName} - {stream.StreamURL}</div>
            )}
          </article>
        </div>
        <div class="right-half">
          <article>
            <h1>Right Half</h1>
            <p>If your knees aren't green by the end of the day, you ought to seriously re-examine your life.</p>
          </article>
        </div>
      </section>
    );
  }
}
export default App;