Here is the code for Moralis:
function Redpit() {
const { authenticate, isAuthenticated, user } = useMoralis();
const [isActivated, setisActivated] = useState(false);
const { Moralis, isInitialized } = useMoralis();
const { data, error, isLoading } = useMoralisQuery("Posts");
const results = JSON.stringify(data, null, 2)
const finalResult = JSON.parse(results)
console.log(finalResult)
const createPost = () => {
setisActivated(true);
}
useEffect(async () => {
const query = await new Moralis.Query("Posts");
const posts = query.find();
console.log(posts);
}, [])
return(
<div class="load-more">
<div class="pit-post">
<figure>
<img src="images/resources/red-post1.jpg" alt="" />
<span><i class="fa fa-bolt"></i></span>
<i class="fa fa-image"></i>
</figure>
{finalResult.map((result) => {
{user.get("username") === result.author.username ? <Userpost /> : void(0)}
})}
</div>
)
}
This is the code Iām trying to render:
import React from 'react'
import { useMoralis, useMoralisQuery } from "react-moralis";
function Userpost() {
const { data, error, isLoading } = useMoralisQuery("Posts");
const results = JSON.stringify(data, null, 2)
const finalResult = JSON.parse(results)
console.log(data)
return (
<div>
{finalResult.map((result) => {
return <div class="central-meta item">
<div class="pit-post">
<figure>
<img src="images/resources/red-post2.jpg" alt="" />
<i class="fa fa-video"></i>
</figure>
<div class="pit-post-deta">
<h4><a href="social-post-detail.html" title="">{result.title}</a></h4>
<ul class="post-up-time">
<li>
<div class="usr-fig">
<img src="images/resources/comet-1.jpg" alt="" />
<a href="#" title="">p/dewwater</a>
</div>
</li>
<li><i class="fa fa-clock-o"></i> Jan 12, 2020</li>
<li>link <a href="#" title="">https://www.abc.com</a></li>
</ul>
<ul class="pit-opt">
<li class="comentz" title="Comments"><i class="fa fa-comment"></i><em>2.2k</em></li>
<li class="share-pst" title="Shares"><i class="fa fa-share-alt"></i><em>125</em></li>
<li class="save-post" title="Save Post"><i class="fa fa-save"></i></li>
<li class="bad-report" title="Report"><i class="fa fa-flag"></i></li>
<li class="bane" title="Stop Post"><i class="fa fa-ban"></i></li>
<li class="get-link" title="Get Post Link"><i class="fa fa-link"></i></li>
<li class="copy-embd" title="Copy Embed"><i class="fa fa-code"></i></li>
<li class="smile-it" title="Give Smiles"><i class="fa fa-smile-o"></i><em>Smile it</em>
<div class="smiles-bunch">
<i class="em em---1"></i>
<i class="em em-smiley"></i>
<i class="em em-anguished"></i>
<i class="em em-laughing"></i>
<i class="em em-angry"></i>
<i class="em em-astonished"></i>
<i class="em em-blush"></i>
<i class="em em-disappointed"></i>
<i class="em em-worried"></i>
<i class="em em-kissing_heart"></i>
<i class="em em-rage"></i>
<i class="em em-stuck_out_tongue"></i>
</div>
</li>
</ul>
</div>
<div class="right-pst-meta">
<a href="#" title="" class="blu">New</a>
<div class="users-thumb-list">
<a href="#" title="" data-toggle="tooltip" data-original-title="Anderw">
<img src="images/resources/userlist-1.jpg" alt="" />
</a>
<a href="#" title="" data-toggle="tooltip" data-original-title="frank">
<img src="images/resources/userlist-2.jpg" alt="" />
</a>
<a href="#" title="" data-toggle="tooltip" data-original-title="Sara">
<img src="images/resources/userlist-3.jpg" alt="" />
</a>
<a href="#" title="" data-toggle="tooltip" data-original-title="Amy">
<img src="images/resources/userlist-4.jpg" alt="" />
</a>
<a href="#" title="" data-toggle="tooltip" data-original-title="Ema">
<img src="images/resources/userlist-5.jpg" alt="" />
</a>
<span><a title="" href="#">24+ more</a> liked</span>
</div>
</div>
<div class="number">
<span class="plus"><i class="fa fa-angle-up"></i></span>
<input type="text" value="0"/>
<span class="minus"><i class="fa fa-angle-down"></i></span>
</div>
</div>
</div>
})}
</div>
)
}
export default Userpost
Iām trying to render a component only if the user matches the current user, but it is not rendering as expected, because it renders nothing.