const { useState, useEffect } = React;

function Character(props) {
  const [data, setData] = useState({});
  
  useEffect(function() {
    const req = $.get(`https://swapi.co/api/people/${props.id}`, function(data) {
      setData(data);
    });
    return function() {
      req.abort();
    }
  }, [props.id]);
  
  return <p>id = {props.id}, name = {data.name}</p>
}

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { id: 1 };
    this.shuffle = this.shuffle.bind(this);
  }
  
  shuffle() {
    this.setState({ id: _.random(1, 10) });
  }
  
  render() {
    return (
      <div>
        <p>Hello World</p>
        <Character id={this.state.id} />
        <button onClick={this.shuffle}>Shuffle</button>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.querySelector('main'));