改造前

src/EmojiGenerator.js

import React, { Component } from 'react';

const emojiSet = ['🎃', '👻', '🧟', '😱', '👽', '💀'];

class EmojiGenerator extends Component {
  state = {
    emoji: emojiSet[0]
  }

  generateEmoji = () => {
    let randomIndex = Math.floor(Math.random() * emojiSet.length);
    let randomEmoji = emojiSet[randomIndex];

    this.setState({
      emoji: randomEmoji
    })
  }

  render() {
    return (
      <div>
        <span className="emoji" role="img" aria-label="emoji">
          { this.state.emoji }
        </span>
        <button className="medium-btn" onClick={ this.generateEmoji }>
          Generate
        </button>
      </div>
    )

  }
}

class App extends Component {
  render() {
    return (
      <div>
        <EmojiGenerator />
      </div>
    );
  }
}

export default App;

src/TokenApp.js

import React, { Component } from 'react';

class TokenForm extends Component {
  handleSubmit = event => {
    event.preventDefault();
    const { setToken } = this.props;
    const token = this.tokenInput.value;
    if (token) {
      setToken(token);
    }
  }

  render() {
    return (
      <form onSubmit={ this.handleSubmit }>
        <input
          type="text"
          name="token"
          placeholder="Enter your Github token"
          ref={input => {
            this.tokenInput = input;
          }}
        />
      </form>
    )
  }
}

export default class TokenApp extends Component {
  state = {
    token: null
  }

  componentDidMount() {
    this.setState({ token: sessionStorage.getItem("token") });
  }

  setToken = token => {
    sessionStorage.setItem("token", token);
    this.setState({ token });
  }

  render() {
    const { token } = this.state;
    return (
      <div>
        <h1>Hello</h1>
        { token ? token : <TokenForm setToken={ this.setToken } /> }
      </div>
    )
  }
}

改造后

src/EmojiGenerator.js

import React, { useState } from 'react';

const emojiSet = ['🎃', '👻', '🧟', '😱', '👽', '💀'];

const EmojiGenerator = () => {
  const [emoji, setEmoji] = useState(emojiSet[0])

  const generateEmoji = () => {
    let randomIndex = Math.floor(Math.random() * emojiSet.length);
    let randomEmoji = emojiSet[randomIndex];

    setEmoji(randomEmoji);
  }

  return (
    <div>
      <span className="emoji" role="img" aria-label="emoji">
        { emoji }
      </span>
      <button className="medium-btn" onClick={ generateEmoji }>
        Generate
      </button>
    </div>
  )
}

const App = () => {
  return (
    <div>
      <EmojiGenerator />
    </div>
  );
}

export default App;

src/TokenApp.js

import React, { Component, useState, useEffect } from 'react';

class TokenForm extends Component {
  handleSubmit = event => {
    event.preventDefault();
    const { setToken } = this.props;
    const token = this.tokenInput.value;
    if (token) {
      setToken(token);
    }
  }

  render() {
    return (
      <form onSubmit={ this.handleSubmit }>
        <input
          type="text"
          name="token"
          placeholder="Enter your Github token"
          ref={input => {
            this.tokenInput = input;
          }}
        />
      </form>
    )
  }
}

const TokenApp = () => {
  const [token, setToken] = useState(sessionStorage.getItem("token"))

  useEffect(() => {
    sessionStorage.setItem("token", token);
  })

  return (
    <div>
      <h1>Hello</h1>
      { token ? token : <TokenForm setToken={ setToken } /> }
    </div>
  )
}

export default TokenApp;