React: Setting onClick method appropriately - reactjs

Question

I am trying to update star icons in React on my profile cards so that when the user clicks the star it saves the profile to the users favourites. I only want it to be for loggedin users and otherwise i want a conditional render method so that the star isn't shown at all if the user is not logged in.
I am trying to figure out how to update the below code. There is already an onClick method in there but i think it doesn't need to be as we aren't using the font awesome icons for rating, just to save favourites. The current method for onClickDetail means that if anywhere in the profile card is clicked the user is directed to the underlying profile. I need to some how provide and exception that it doesn't apply to the star icon itself.
Thanks for your help.
import React, {useState} from 'react';
import {FontAwesomeIcon} from '#fortawesome/react-fontawesome';
import {faMapMarkerAlt} from '#fortawesome/free-solid-svg-icons';
import {ServiceType} from 'shared/models/profile/serviceType';
import {toTitleCase} from 'shared/utils/string';
import {FeeKind} from 'shared/models/fee-kind/FeeKind';
import {useAuth} from 'shared/hooks/useAuth';
import {ProfileCardFee} from 'shared/components/ProfileCard/ProfileCardFee/ProfileCardFee';
import {StarRatingStar} from 'shared/components/StarRating/StarRatingStar';
import './style.scss';
import {getFullName} from 'shared/utils/profile';
import {IProfile} from 'shared/models/profile/IProfile';
interface IProfileCardProps {
profile: IProfile;
onClickDetail?: () => void;
}
export const ProfileCardDetails = ({profile, onClickDetail}: IProfileCardProps) => {
const fullName = getFullName(profile);
const professionTitle = profile.profession ? toTitleCase(profile.profession) : null;
const [tempRating, setTempRating] = useState<number | undefined>(undefined);
const [ratingValue, setRatingValue] = useState<number>(-1);
const numStars: number = 1;
const {isAuthenticated, tokenData} = useAuth();
const onChangeStartIndex = (value: number) => {
if (ratingValue >= 0) {
setRatingValue(-1);
} else {
setRatingValue(value);
}
};
return (
<div onClick={onClickDetail} className="ProfileCard__details d-flex justify-content-between">
<div>
<div className="ProfileCard__profession">{professionTitle || 'undefined'}</div>
<div className="ProfileCard__title">{fullName}</div>
<div className="ProfileCard__location">
<FontAwesomeIcon icon={faMapMarkerAlt} className="ProfileCard__location-icon" />
{profile?.contact_details_display?.city}
</div>
</div>
<div className="flex_colum_end">
{/* {isAuthenticated ? ( */}
<div className="text_align_end ProfileCard__star_icon">
{[...Array(numStars)].map((_, starIndex) => (
<StarRatingStar
key={starIndex}
isClickable={true}
onClick={() => onChangeStartIndex(starIndex)}
onMouseEnter={() => setTempRating(starIndex)}
onMouseLeave={() => setTempRating(undefined)}
isActive={starIndex <= (ratingValue ?? -1)}
isHover={
tempRating !== undefined &&
starIndex <= tempRating &&
starIndex > (ratingValue ?? -1)
}
/>
))}
</div>
{/* )
: (
''
)} */}
<div
className={
profile && profile.service_types && profile.service_types.includes('FIXED_FEES' as ServiceType)
? 'flex_row_center mobileDayHour Hourly_rate_responsive'
: 'flex_center'
}
>
<div
className={
profile &&
profile.service_types &&
profile.service_types.includes('FIXED_FEES' as ServiceType)
? 'text_align_end'
: 'text_align_end'
}
>
<ProfileCardFee amount={profile.service_details?.hour_rate as number} kind={FeeKind.Hour} />
</div>
<div className="text_align_end pl-3">
<ProfileCardFee amount={profile.service_details?.day_rate as number} kind={FeeKind.Day} />
</div>
</div>
<div className="fixed_fee_enum_div">
{profile &&
profile.service_types &&
profile.service_types.includes('FIXED_FEES' as ServiceType) && (
<>
{' '}
<div className="fixed_fee_enum_svg">
<img
className="fixed_fee_enum_svg_icon"
src="/assets/profileIcons/lock.svg"
alt="Rightful Logo"
/>
</div>
<div className="fixed_fee_enum_text">Fixed Fee Options</div>
</>
)}{' '}
</div>
</div>
</div>
);
};
I think the onClick method needs to be something like this, updated so that it does not show a conditional render of the star icon rather than a toast if the user is not logged in.
const {tokenData} = useAuth();
const onClick = () => {
if (!tokenData) {
toast.error('Not Signed In', 'Please sign in to save profiles to your Talent List');
return;
}
(async () => {
const favorite = await createFavoriteAsync({
user_id: tokenData.id, // The ID of the current signed-in user
profile_id: profile.id, // The profile they are "starring"
});
})();
}

Answer 1

You can use stopPropagation to do it. Change your onClick method like the onClick below
<StarRatingStar
onClick={(e) => {
onChangeStartIndex(starIndex);
e.stopPropagation();
}
}
/>