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

コロナによる需要変化 コロナパンデミックの影響で、人々は外に出られなくなり、自宅で過ごす時間が増えました。 この自粛ムードの中、下記のようなビジネスの需要変化が引き起こされています。 【利用者減少】 ...

2

米国レストランの決済時に毎日お世話になっていた「Square」のビジネスモデルについて本日はふれていきたいと思います。 「Square」とは、ネットにつながったモバイル端末と専用のカードリーダーを用意 ...

3

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

4

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

5

ナイキのSNKRSが、なぜこれほどまでに人気なのか?調べてみました。 きっかけは米国での友達との会話。彼は自分のシューズをみせて、「これ20万円もしたんだぜ。」と語ってくれました。 あまり靴に興味がな ...

-Blockchain, code, Metaverse, VR
-, ,

Copyright© BUSINESS HACKER , 2022 All Rights Reserved Powered by AFFINGER5.