const { useState, useEffect } = React;

function useApi(endpoint, id) {
  const [ data, setData ] = useState({});
  
  useEffect(function() {
    const xhr = $.get(`${endpoint}/${id}`, setData);
    return function() {
      xhr.abort();
    };
  }, [id]);   
  
  return data;
}

function Character(props) {
  const data = useApi('https://swapi.co/api/people', props.id);
  return <p>Character with id {props.id} is named {data.name}</p>
}

function Film(props) {
  const data = useApi('https://swapi.co/api/films', props.id);
  return <p>Film with id {props.id} is named {data.title}</p>  
}

function App(props) {
  const [characterId, setCharacterId] = useState(1);
  const [filmId, setFilmId] = useState(1);
  
  function changeCharacter() {
    setCharacterId(_.random(1, 10));
    setFilmId(_.random(1, 10));
  }
  
  return (
    <div>      
      <Character id={characterId} />
      <Film id={filmId} />
      <button onClick={changeCharacter}>Change</button>
    </div>
  )
}

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