How to pass data into a useState modal - reactjs

Question

I'm attempting to have an icon's state change depending on whether or not there's data present. For example, if the 'Likes' counter is greater than 0 than the circle will be filled in, otherwise, it will be an empty circle.
I have not been able to figure out how to render this via useState
import React, { useState } from "react";
import ActivityIconEngaged from "./ActivityIconEngaged";
import { Modal, Button } from "react-bootstrap";
import PropTypes from "prop-types";
import data from "../Assets/ActivityData";
import { faCircle } from "#fortawesome/pro-regular-svg-icons";
import { FontAwesomeIcon } from "#fortawesome/react-fontawesome";
class ActivityIcon extends React.Component {
constructor(props) {
super(props);
this.state = {
activities: data.activities,
activity: data.activities[0]
};
}
render() {
const { activities, activity } = this.state;
return (
<div>
{activities.map(activity => (
<ActivityIconData key={activity._id} activity={activity} />
))}
</div>
);
}
}
function ActivityIconData({ activity }) {
const { index, likeCount } = activity;
const [show, setShow] = useState(false);
const handleClose = () => {
setShow(false);
};
const [trigger, setTrigger] = useState({ showContent: true });
const showContent = trigger;
const openModal = e => {
e.preventDefault();
setShow(true);
};
if ({ likeCount } > 0) {
setTrigger(!trigger);
}
return (
<>
<div id={`activity-${index}`}>
<span onClick={openModal} className="mr-1">
{showContent ? (
<FontAwesomeIcon
icon={faCircle}
size="2x"
className="ActivityIconDefault"
/>
) : (
<ActivityIconEngaged />
)}
</span>
<Modal show={show} onHide={handleClose}>
<Modal.Header closeButton>
<Modal.Title>Activity</Modal.Title>
</Modal.Header>
<Modal.Body>likes: {likeCount}</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={handleClose}>
Close
</Button>
<Button variant="primary" onClick={handleClose}>
Save Changes
</Button>
</Modal.Footer>
</Modal>
</div>
</>
);
}
ActivityIconData.propTypes = {
activity: PropTypes.object.isRequired
};
export default ActivityIcon;
The result that I'm currently getting is that the modal successfully opens when the circle is clicked, HOWEVER, the circle is not filled when the number of likes exceeds 0.

Answer 1

I think you're declaring too many pieces of state to handle this. You don't need a likeCount as well as a trigger variable with a showContent property.
If you want to use a ternary operator to show the icon, you can just replace showContent with an expression for likeCount:
{likeCount > 0 ? <FontAwesomeIcon icon={faCircle} size="2x" className="ActivityIconDefault" /> : <ActivityIconEngaged />}

Answer 2

In first look, your condition is always false because you making a comparison between object and a number.
Two distinct objects are never equal for either strict or abstract comparisons.
// instead of { likeCount } > 0, which always results false
if (likeCount > 0) {
setTrigger(!trigger);
}