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

個人のブログで、ReactとRailsでDBとやりとりする記事を作りました

フロントReact、バックRailsでデータベースに保存する

某プログラミングスクール（◯MM）で課題で出されたものをReactで作ってみて、そこにサクセスメッセージを出そう、と言うのが今回の目的です。

メモ書き程度で書いていきます。

完成後の動作

Reactでサクセスメッセージを出せるようにしました pic.twitter.com/TjBkS0008y

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

フォーム内容の保存に成功するとサクセスメッセージが呼び出されます。
流れとしては、

• stateを作る
• createが呼ばれsaveされたらstateを変更する
• stateをコンポーネントに渡してメッセージを表示させる

こんな感じです。

stateを作る

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

successCreateと言うstateを作りました。
ここは初期値はfalseとして、createが呼ばれたらtrueとします。

createが呼ばれsaveされたらstateを変更する

  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側でbooksコントローラーのcreateを呼び出し、保存されたデータはbooksに追加し、successCreateはtureに変更します。
ちなみにbooksにはBookモデルのデータが全て入っています。

stateをコンポーネントに渡してメッセージを表示させる

このsuccessCreateの値をコンポーネントに渡します。

<BookCreateForm
  createBook={this.createBook}
  successCreate={this.state.successCreate}
/>

受け取った先で、stateがtrueの時にメッセージを表示するよう記述します。

{this.props.successCreate && (
  <p style={{color: '#16de69', fontSize: 6}}>Book was successfully created.</p>
)}

これでBookがcreateされ、stateが変更した時にメッセージが出るようになりました。

react側とrails側でバリデーションをかけてより安全性を高めれば、思いがけないメッセージの表示はなくなるかと。

忘備録的なものなのでとりあえず動いた時点で記事にしております、あしからずです。