//tips
//smart contract
気合いで作成中。
やっと{data.data.map((value, key)=> (のエラーが解除され使い方がわかった。これはjsonの構造を理解していなければいけなかった。
{
"message": "This is sample Debank data.",
"data": [
{"name":"taro", "mail":"taro@yamada", "age":39},
{"name":"hanako", "mail":"hanako@flower", "age":28},
{"name":"sachiko", "mail":"sachiko@happy", "age":17}
]
}
Fetchが間違っているのかと思ったが、しっかり機能していた。
const fetcher = url => fetch(url).then(r => r.json())
const [ address, setAddress ] = useState('/api/hello')
const { data, err } = useSWR(address,fetcher)
ブロック単位での記述ができてきたらこちらは別コンポーネントで記載する。
import Layout from '../components/layout'
import MyImage from '../components/image'
import React,{useState} from 'react'
import useSWR from 'swr'
export default function Home() {
const fetcher = url => fetch(url).then(r => r.json())
const [name,setName]=useState("naki")
const [key,setKey]=useState("0x000000")
const [ address, setAddress ] = useState('/api/hello')
const { data, err } = useSWR(address,fetcher)
if (err) return <div>An error has occurred.</div>;
if (!data) return <div>Loading...</div>;
const clickFunc=()=>{
setKey(key+1)
}
//api処理用
//なぜかfetchエラー
//Unhandled Runtime Error TypeError: Failed to fetch
//unhandledRejection: TypeError: Only absolute URLs are supported
//fetch(url)
//.then(res=>res.json())
//.then(res=>setDb(res))
return (
<div>
<Layout header="Curation App" >
</Layout>
<div class="container">
<div class="row">
{/* 左サイドバー */}
<div class="col-lg-3">
<MyImage fname="image.jpg" size="250" />
{/* 左サイドバー下部api */}
<div>
<br />
<p>Debank api</p>
{data.data.map((value, key)=> (
<tr key={key}>
<th>{value.name}</th>
</tr>
))}
</div>
</div>
{/* メイン 3:9の9の中身の話*/}
<div class="col-lg-9" >
<div class="row">
{/* メイン 3:9の9のmaxなので12にする必要があった*/}
<div class="col-lg-12 alert alert-primary">
<br />
<p>name:{name}</p>
<p>address:{key}</p>
<p>Following:200 Follower:200 gifted:2000</p>
<div>
{/* ボタンを横並びに固定したい */}
<button className="btn btn-primary" onClick={clickFunc}>
click me
</button>
<button className="btn btn-primary" onClick={clickFunc}>
click me
</button>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<p>address:</p>
<p>following:</p>
<p>followers:</p>
</div>
{/* 右サイドバー */}
<div class="col-lg-6 alert alert-primary">
<p>abc</p>
<p>abc</p>
</div>
</div>
</div>
</div>
</div>
</div>
)
}
ボタンの間を開けて配置したいので方法を模索。余白を設定したい要素のclsssに「m方向-余白のサイズ」を設定すればいけるよう。
mr-3・・・要素の右側に余白（マージン）を設定
ml-3・・・要素の左側に予約（マージン）を設定
無事にボタンのみぎに余白を開け隙間を作れた。これは便利。
参考：
https://himatoto.com/bootstrap2/
Bootstrapのカード機能をmainに導入する。
一般的なbootstrapのコードを使用すると画面がホワイトアウトする。
https://demos.creative-tim.com/nextjs-material-kit/documentation/cards
https://www.creative-tim.com/learning-lab/nextjs/cards/argon-dashboard
https://react-bootstrap.github.io/components/cards/
さて、どうしたものか。importが足りていないのだろうか。
