【React】一定時間で消える表示を作る

前回作ったサクセスメッセージがいつまでも表示されるのは如何なものかと思い、今回は表示後に何秒か経ったら消えるようにしました。

前回
【React】Railsでsaveされた時に、Reactでサクセスメッセージを表示

今回の完成形

reactで表示したメッセージをn秒後に消えるようにしました pic.twitter.com/H3YI09obJZ

— きたやまかつや (@kitakatsu1992) December 11, 2020

思った以上に簡単、と言うか思いっきりJavaScriptの書き方だったので勉強不足を感じました。

setTimeout()を使ってstateを変更する

前回、state の値が true か false かでメッセージを表示させる、という風に作成しました。

初期値がfalseのstateをtrueでメッセージを表示させたので、逆にtrueをfalseに戻せばOKということです。

まずは初期値。

  state = {
    books: [],
    successCreate: false
  }

  createBook = (title, body) => {
    axios
      .post('http://localhost:3001/books', { title: title, body: body})
      .then((response) => {
        const newData = update(this.state.books, { $push: [response.data]})
        this.setState({books: newData, successCreate: true})
      })
  }

rails側のcreateが呼ばれ、データがsaveされるとfalseがtrueに変わる、というものです。

このtrueを何秒後かにfalseにsetStateするようにします。

  createBook = (title, body) => {
    axios
      .post('http://localhost:3001/books', { title: title, body: body})
      .then((response) => {
        const newData = update(this.state.books, { $push: [response.data]})
        this.setState({books: newData, successCreate: true})
        // ここから追記
        setTimeout(function(){
          this.setState({successCreate: false})
        }.bind(this),3000)
      })
  }

これは3秒後にstateを変更するようにしています。

stateがfalseになるので表示されていたメッセージは消えるようになります。

おそらくあまりに初歩的な内容なので調べても全然出てこなかった！！
もっと精進してさくっと実装できる力を付けたいものです