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

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

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.