【Rails × React】 와우… Rails의 created_at, 너무 더러워…

Rails × React SPA의 작성에 있어서, 투고 일시를 프런트에서 표시하고 싶어졌다.
Rails에서는 기본적으로 created_at이라는 열이 생성되므로 이것을 잘 뷰로 표시하고 싶다.
rails의 created_at는 UTC 시간으로 datetime 형이므로 다음과 같이 화면에 그대로 표시하면 괜찮습니다.

따라서 이것을 어떻게든하고 싶다.

결론…moment를 사용하자

이하 사이트 참고로 했습니다.
htps // 류소. V / Po Sts / Rea ct-y y-momen tjs

절차 ①…moment 설치

다음 명령 실행

npm install moment

순서②…moment 불러오기

다음의 설명을 moment를 읽고 싶은 jsx 파일에 기술

import moment from moment

순서③…날짜를 표시하고 싶은 곳에서 moment를 호출한다

{this.state.outputs.map((output, output_index) => {
  return(
    <li key={output_index}>
      <h3>アウトプット{output_index+1}</h3>
      <h4>気づき</h4>
      <p>{output.awareness.content}</p>
      {output.action_plans.map((action_plan, action_plan_index) => {
        return(
          <div className="action-plan" key={action_plan.id}>
            <h4>アクションプラン{action_plan_index +1}</h4>
            <p>{action_plan.time_of_execution}{action_plan.what_to_do}{action_plan.how_to_do}</p>
          </div>
        )
      })}
      <p>投稿日：{moment(output.awareness.created_at).format('YYYY-MM-DD')}</p>
    </li>
  )
})}

이번은 독서의 아웃풋 일람으로, 깨달음과 액션 플랜을 표시하는 개소에 실장.

<p>投稿日時：{moment(output.awareness.created_at).format('YYYY-MM-DD')}</p>

이 부분에서 moment를 사용. 쓰는 방법으로

moment(日付データ).format('表示したいフォーマット')

의 형식이 된다.

구현 결과

이제 다음과 같이 created_at에서 날짜만 빼내는 데 성공.
날짜도 제대로 UTC와의 어긋남이 수정되고 있고, 외형으로서도 매우 보기 쉬워졌다.