user-api-react.js

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


const User = (props) => {
    console.log(props);
      
    return (
      <div>
        <img src={props.picture.thumbnail}/>
        <div>
          <span>
            {props.name.first}
          </span>
          <span>
            {props.name.last}
          </span>
        </div>
        <div>
          {props.email}
        </div>
      </div>
    )

}

class App extends Component {
  // constructor(props) {
  //   super( props );
  //   this.
    state = {
      users: []
    }
  // }
  componentWillMount() {

    fetch('https://randomuser.me/api/?results=33').then( results => {
      return results.json()
    }).then( data => {

      console.log(
        data.results
      );
      
      this.setState({ users: data.results })
    }
    )

  }

  render() {
    let userList = this.state.users.map( (user,i) => {
      console.log(i);
      
      return <User key={i} {...user}/>
    })
    return (

      <div>
        {userList}
      </div>
    );
  }
}

export default App;