app.js

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

function RobotItem(props) {
  return (
    <li>
      {props.name}
    </li>
  )
}

class App extends Component {

  constructor() {
    super();
    this.state = {
      message: '',
      robots: []
    }
  }

  componentDidMount() {
    fetch('http://localhost:5000/api/robot')
      .then(response => response.json())
      .then(json => {        
        this.setState({robots: json});
      });
  }


  render() {
    if (!this.state.robots) 
      return <p>loading...</p>

    let stuff = this
      .state
      .robots
      .map((robot, i) => {
        return (            
            <RobotMaster key={robot.id} {...robot}/>           
        )
      });

    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo"/>
          <h2>Robot Masters 2.0</h2>
        </div>
        <div className="App-intro">
          {this.state.robots.length}
          <ul>
          {stuff}
          </ul>
        </div>
      </div>
    );
  }
}

export default App;