Klaytn Docs
Search…
7. FeedPage
FeedPage
FeedPage is consisted of 3 main components that interact with Klaystagram contract.
1
// src/pages/FeedPage.js
2
3
const FeedPage = () => (
4
<main className="FeedPage">
5
<UploadButton /> // 7-2. UploadPhoto
6
<Feed /> // 7-3. Feed
7
</main>
8
)
Copied!
1
// src/components/Feed.js
2
3
<div className="Feed">
4
{feed.length !== 0
5
? feed.map((photo) => {
6
// ...
7
return (
8
<div className="FeedPhoto" key={id}>
9
10
// ...
11
{
12
userAddress === currentOwner && (
13
<TransferOwnershipButton // 7-4. TransferOwnership
14
className="FeedPhoto__transferOwnership"
15
id={id}
16
issueDate={issueDate}
17
currentOwner={currentOwner}
18
/>
19
)
20
}
21
// ...
22
</div>
23
)
24
})
25
: <span className="Feed__empty">No Photo :D</span>
26
}
27
</div>
28
)
Copied!
To make component interact with contract, there are 3 steps.
First, create KlaystagramContract instance to connect contract with front-end. Second, using KlaystagramContract instance, make API functions that interact with contract in redux/actions Third, call functions in each component
Let's build it!
Copy link
Edit on GitHub