Fetch and render

Workshop_v1.jsx

import React, { Component } from 'react';
import request from 'axios';
import Name from './Name.jsx';

class WorkShop extends Component {
  constructor(props) {
    super(props);

    this.state = {
      user: {},
      name: '',
      description: '',
      ingredients: [],
      procedures: []
    };
  }

  getUser(username) {
    request.get(`https://api.github.com/users/${username}`)
      .then(res => {
        this.setState({ user: res.data });
      });
  }

  clicked() {
    alert('I\'ve been clicked!');
  }

  render() {
    const data = {
      bio: this.state.user.bio,
      avatar: this.state.user.avatar_url,
      handleClick: this.clicked
    };

    return (
      <div>
        <h1>Welcome to our workshop.</h1>
        <div>
          <button onClick={() => this.getUser('kingisaac95')}>Get user</button>
        </div>
        <Name
          data={data}
        />
      </div>
    );
  }
}

export default WorkShop;