import React from 'react'
import { Component } from 'react'

class SpaDetail extends Component {
  constructor(props) {
    super(props);
    this.state = { spa: [] }
  }
  componentDidMount () {
    this.getSpa()
  }
  getSpa () {
    axios
    .get('/v1/spa/' + this.props.params.id)
    .then((res) => {
      console.log(res.data)
      this.setState({spa: res.data})
    })
  }

	render () {
		return (
			<div>
        <dl>
          <dt>温泉名</dt>
          <dd>{ this.state.spa.name }</dd>
          <dt>住所</dt>
          <dd>{ this.state.spa.address }</dd>
          <dt>ホームページ</dt>
          <dd>{ this.state.spa.url }</dd>

        </dl>
			</div>
		)
	}
}

export default SpaDetail

@@ -481,32 +481,389 @@
 spa.name %7D%3C/dd%3E%0A
+          %3Cdt%3E%E5%86%99%E7%9C%9F%E3%82%A4%E3%83%A1%E3%83%BC%E3%82%B8%3C/dt%3E%0A          %3Cdd%3E%3Cimg src=%7B%60$%7Bthis.state.spa.image%7D%60 %7D /%3E%3C/dd%3E%0A          %3Cdt%3E%E5%96%B6%E6%A5%AD%E6%99%82%E9%96%93%3C/dt%3E%0A          %3Cdd%3E%7B this.state.spa.workday %7D%3C/dd%3E%0A          %3Cdt%3E%E6%96%99%E9%87%91%3C/dt%3E%0A          %3Cdd%3E%7B this.state.spa.fee %7D%3C/dd%3E%0A          %3Cdt%3E%E5%8A%B9%E8%83%BD%3C/dt%3E%0A          %3Cdd%3E%7B this.state.spa.effect %7D%3C/dd%3E%0A          %3Cdt%3E%E8%A8%AD%E5%82%99%3C/dt%3E%0A          %3Cdd%3E%7B this.state.spa.equipment %7D%3C/dd%3E%0A
           %3Cdt%3E%E4%BD%8F%E6%89%80
@@ -982,16 +982,81 @@
  %7D%3C/dd%3E%0A
+          %3Cdt%3E%E9%9B%BB%E8%A9%B1%E7%95%AA%E5%8F%B7%3C/dt%3E%0A          %3Cdd%3E%7B this.state.spa.tel %7D%3C/dd%3E
 %0A       

add new column in spa detail