Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?

1. Add the People component:

class People extends Component {
  constructor() {
    super();
    this.state = { people: [] };
    this.callAPI();
  }
  callAPI() {
  
    // API call goes here!
  
  }
  render() {
    var firstPerson = this.state.people[ 0 ];
    if ( !firstPerson ) {
      return "Loading...";
    } else {
      return <div>
        <p>{firstPerson.name}</p>
        
        // Button goes here!
      
      </div>;
    }
  }
}

2. Check that you see "Loading..." rendering in your hello world app

3. Add the API call

fetch( "https://uinames.com/api/?ext&amount=3" )
      .then( response => response.json() )
      .then( people => this.setState( { people } ) );

4. Check that you see a name generated every time you reload the page

5. Add the Generate button

<button onClick={() => this.callAPI()}>Generate</button>

6. Check that the button works

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.