DigitMagazine

Preact Git User Component

Apr 20th, 2018
102
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 0.97 KB | None | 0 0
  1. import { h, Component } from 'preact';
  2. import style from './styles'
  3. export default class Github extends Component {
  4. state = {
  5. username: '',
  6. followers: null,
  7. };
  8. fetchUser = () => {
  9. fetch(`https://api.github.com/users/${this.state.username}`)
  10. .then(response => response.json())
  11. .then(user => this.setState({followers: user.followers }));
  12. }
  13. setUsername = e => {
  14. this.setState({ username: e.target.value });
  15. }
  16. render({}, { username, followers }) {
  17. return (
  18. <div class={style.container}>
  19. <h1>Enter a Github username</h1>
  20. <input
  21. type="text"
  22. value={username}
  23. onChange={this.setUsername}
  24. />
  25. <button
  26. onClick={this.fetchUser}>
  27. Submit
  28. </button>
  29. {
  30. followers &&
  31. <h3>{username} has {followers} followers on Github.</h3>
  32. }
  33. </div>
  34. );
  35. }
  36. }
Add Comment
Please, Sign In to add comment