React multiple conditions inside ternary operator? - reactjs

Question

I'm building an open forum and I got everything working the way I want however, I recently ran into a small bug in my code. While a lot of forums require a log in to view topics that are asked, mine is built without the user having to register or log in (I built it like this in case the user simply wants to view topics without having to register or log in). For one of the functionalities, I have it to where users can delete there replies for a specific question thread.
Therefore, I got it to where it only recognizes the users ID and it'll delete the reply based off of that. However, if the user is not logged in, they'll still be able to delete the reply (this is where the bug is).
So my question is it possible that I can check for 2 conditions inside my ternary operator?
I want to check 1st if the user is logged in, if they are, check if the userId matches the reply_user_id and if both cases pass, they'll be able to delete there reply. However, if one fails Don't display the trash icon. Right now, the trash icon works fine when logged in but it's displaying the trash icon if the user is not logged in.
I have a lot of code so I'm only going to show the portion relating to my question:
import React from 'react';
import Header from '../common/Header';
import { Link } from 'react-router-dom';
import { Modal, Button } from 'react-bootstrap';
import Pagination from "react-js-pagination";
import ForumpageService from '../../services/forumService';
import appController from '../../controllers/appController';
import { confirmAlert } from 'react-confirm-alert';
class Forumreplies extends React.Component {
constructor(props){
super(props);
this.deleteReply = this.deleteReply.bind(this);
this.pagination = this.pagination.bind(this);
this.state = {
topicId: 0,
replyId: 0,
userId: this.props.match.params.userid,
postDetails: {},
repliesData: [],
reply: '',
errorMsg: '',
isLoggedin: false,
canDelete: false,
}
}
async componentDidMount(){
// Check if user is logged in
if(localStorage.getItem('userData') !== null) {
this.setState({isLoggedin: true})
}
const topicId = this.props.match.params.topicid
const postDetails = await ForumpageService.replyDetails({topicId: topicId})
this.setState({
postDetails: postDetails[0],
topicId: topicId
})
await this.postReplies();
console.log(this.state);
}
}
deleteReply(id, e){
confirmAlert({
customUI: ({ onClose }) => {
return (
<div className='custom-ui'>
<h1>Are you sure</h1>
<p>You want to delete this reply?</p>
<button className="btn btn-primary" onClick={onClose}>Cancel</button>
<button className="btn btn-primary" onClick={() => {this.confirmDelete(id); onClose();}}>Confirm</button>
</div>
)
}
})
}
render(){
const repliesData = currentReply.map((row, index) => {
return (
<div className="reply-container" key={index}>
{row.reply_status == 0 ?
<div className="row" id="reply-messages-deleted">
<div className="col-md-8">
<p>{row.userName}</p>
<p>{row.reply_message}</p>
<p>This reply has been deleted</p>
</div>
<div className="col-md-2">
// Multiple condition I want to check, right now it's only checking 1 condition which is the userid to the reply id but I want to also check if the user is offline as well.
{this.state.userId == row.reply_user_id ? <i className="far fa-trash-alt" onClick={this.deleteReply.bind(this, row.reply_id)} title="Delete this reply?"></i> : null }
</div>
</div>
:
<div className="row" id="reply-messages" key={index}>
<div className="col-md-8">
<p>{row.userName}</p>
<p>{row.reply_message}</p>
</div>
<div className="col-md-2">
{this.state.userId == row.reply_user_id ? <i className="far fa-trash-alt" onClick={this.deleteReply.bind(this, row.reply_id)} title="Delete this reply?"></i> : null }
</div>
</div>
}
</div>
)
})
export default Forumreplies;