Blockchain code Metaverse VR

Crypto×VR×SmartContract(501)

スポンサーリンク

//tips

粉末ミルクティの飲み過ぎで健康診断で危険値が出たので、改善方法模索。
暖かく手軽に糖分摂取でき、がぶ飲みできるものを探す。

粉末ミルクティ×→粉末ミルクティ別種×→粉末抹茶△→紅茶パック+牛乳+オリゴ糖×
→梅干し砂糖+お湯△→ぬるいコーラ×→お湯+オレンジジュース△→お湯+redbull(実験中)
予定→お湯+カルピス
予定→お湯+レモネード?タフマン?

//smart contract

Mdeium部分をコンポーネントとして切り出してみる。

Formの中身を <Medium mymedium={mymedium}/>として、Mediumコンポーネントにmap処理を移してみる。

<form onSubmit={handleOnMediumSubmit}>
{/* <h2>Medium</h2>
<button>Medium feed</button>
{mymedium && (
<ul>
{ mymedium.map((item,index) => {
return (
<li key={index}>
<p>{ item.author }</p>
<p>{ item.title } </p>
</li>
);
})}
</ul>
)} */}
<Medium mymedium={mymedium}/>

</form>

下記で無事に機能した。

export default function Medium({mymedium}) {

return (
<div>
<h2>Medium</h2>
<button>Medium feed</button>
{mymedium && (
<ul>
{ mymedium.map((item,index) => {
return (
<li key={index}>
<p>{ item.author }</p>
<p>{ item.title } </p>
</li>
);
})}
</ul>
)}
</div>
)
}

Debankも同様にコンポーネントに分離。

export default function Debank({mydebank}) {

return (
<div>
<h2>Debank</h2>
<button>Debank get</button>
<h6>{mydebank}</h6>
</div>
)
}

複数のtwitterを表示させる場合には

<TwitterTweetEmbed
// tweetId={item.id_str}
tweetId={'1501574706423808004'}
/>

Mapを使用する別途コンポーネントに移すことも検討する。

またmediumをul,liを使わない形にdivで変形。

<div>
{ mymedium.map((item,index) => {
return (
<div key={index}>
<p>item.author: { item.author }</p>
<p>item.title :{ item.title } </p>
</div>
);
})}
</div>

編集用のページ移行するアイコンを追加。

import Icon from '@mui/material/Icon';

<Icon>add_circle</Icon>

こちらで戸惑ったが、下記のURLを参考にトライ。

https://mui.com/components/material-icons/#main-content

import AddCircleOutlineOutlinedIcon from '@mui/icons-material/AddCircleOutlineOutlined';
<AddCircleOutlineOutlinedIcon />

なかなか位置調整に手間取ったがmakestyleで最終的に調整した。

<AddCircleOutlineOutlinedIcon className={classes.doright} sx={{ fontSize: 35 }}/>

doright:{
align:'right',
marginBottom:-6,
},

このボタンをクリックすることで遷移を発生させる。

<Typography variant="h4" component="h1" gutterBottom>
Next.js exampleeeeeeeeeeeeeeeeeeeeeeee
{/* &emsp; */}
<AddCircleOutlineOutlinedIcon
className={classes.doright}
sx={{ fontSize: 35 }}
onClick={()=>{console.log('click!')}}
/>

onClickを実装し、コンソールでイベントを確認できた。

今度はリダイレクトさせる。router pushを使用して機能させた。

https://nextjs.org/docs/api-reference/next/router

import { useRouter } from 'next/router'

const handleClick = (e) => {
e.preventDefault()

router.push('/Note')
}

問題なく稼働したので、編集ページを用意していく。

人気の記事

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.