Blockchain code Metaverse VR

Crypto×VR×SmartContract(471)

スポンサーリンク

//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・・・要素の左側に予約(マージン)を設定

無事にボタンのみぎに余白を開け隙間を作れた。これは便利。

参考:

【Bootstrap 4】ボタングループ使い方。ボタンの一まとめにする方法

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が足りていないのだろうか。

人気の記事

1

皆さん、ついに、エアラインでも、サブスクリプションが始まったのはご存じですか? まだ実験段階ですが、ANAが、定額全国住み放題サービスを提供する「ADDress」と組んで、国内線を4回まで定額利用可能 ...

2

無料でネットショップを開けるアプリとして多くの人に驚きを与えたBASE株式会社が、2019年10月25日東証マザーズに上場しました。2020年2月時点で90万店を超えるショップを抱えるまでに成長してい ...

3

2011年にサービスを開始してから圧倒的な成長率を誇るインテリア通販サイト 【FLYMEe/フライミー】を皆さんご存じでしょうか。 「自分のイメージするインテリア、本当に欲しいインテリアがどこにあるの ...

4

ついに、noteの月間アクティブユーザー数が4400万人(2020年3月時点)に到達しました。 そもそも、「note」とは、クリエイターが、文章やマンガ、写真、音声を投稿することができ、ユーザーはその ...

5

ボードゲームカフェが1日2回転で儲かるという記事をみつけたので興味を持ち、調べてみました。 まずは、需要がどれくらいあるのか、市場のようすからみていきましょう。 世界最大のボードゲーム市場はドイツで、 ...

-Blockchain, code, Metaverse, VR
-, ,

Copyright© BUSINESS HUNTER , 2023 All Rights Reserved Powered by AFFINGER5.