More than 5 years have passed since last update.

「進捗・どう・です・か」をランダムに表示し「進捗どうですか」が完成したら煽ってくるReactコンポーネント

Last updated at 2015-07-20Posted at 2015-07-20

const words = ["進捗", "どう", "です", "か"];

class Shinchokudodesuka extends React.Component {
  constructor(props) {
    super(props);
    this.state = {message: "", done: false};
  }

  componentDidMount() {
    this.dodesuka();
  }

  componentDidUpdate() {
    this.dodesuka();
  }

  dodesuka() {
    if (this.state.done === false) {
      setTimeout(() => {
        const nextMessage = this.state.message + words[Math.floor(Math.random()*words.length)];
        this.setState({message: nextMessage, done: /進捗どうですか$/.test(nextMessage)});
      }, 10);  
    }
  }

  render() {
    return (
      <div>
        {this.state.message}
        {this.state.done ? <span>???<br/>{this.state.message.length}文字で煽られました。</span> : ""}
      </div>
    );
  }
}

React.render(
  <Shinchokudodesuka/>,
  document.getElementById('example')
);

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up