I have a component which renders a bunch of components called ActionItem
<ActionItem title={'Client Assigned'} icon={<MdOutlineAssignmentTurnedIn />} />
<ActionItem title={'Inital Client Follow Up'} icon={<BsFillPersonCheckFill />} />
<ActionItem title={'Validated Need'} icon={<BiDonateHeart />} />
<ActionItem title={'Initiated Discovery'} icon={<RiCompassDiscoverLine />} />
<ActionItem title={'Service In Progress'} icon={<GiProgression />} />
<ActionItem title={'Fulfilled The Need'} icon={<ImCheckmark />} />
Inside of my ActionItem I have a function: handleToggle() which fires onClick and pretty much adds or removes an "active" class. I want this function available to every component EXCEPT the one with the title of 'Client Assigned'
ActionItem component:
const [toggleItem, setToggleItem] = useState(false)
const [date, setDate] = useState('')
const handleToggle = () => {
setToggleItem(!toggleItem)
setDate(new Date())
if (date !== '') {
setDate('')
}
}
useEffect(() => {
title === 'Client Assigned' ? handleToggle() : null
}, [])
return (
<React.Fragment>
<div className={toggleItem ? 'ReportsModal' : 'ReportsModal not-active'}>
<span
style={title === 'Fulfilled The Need' ? (
{ borderColor: 'green', backgroundColor: 'green', color: '#fff' }
) : null}
className={'hover'}
onClick={title === 'Client Assigned' ? handleToggle : null}>
{icon}
</span>
<div>
<h3>{title}</h3>
<p>{date !== '' ? moment(date).format('D MMM YYYY') : date}</p>
{toggleItem ? (
<h5 onClick={handleInitComment} className='hover'><AiOutlinePlusCircle style={iconStyles} /> Add Comment</h5>
) : null}
</div>
</div>
the conditional I am trying to use is currently not working. Any advice?
if you just want to fire handleToggle conditionally based on the title === "Client Assigned", I would do this.
const handleToggle = (title) => {
if (title === "Client Assigned") {
setToggleItem(!toggleItem)
setDate(new Date())
if (date !== '') {
setDate('')
}
}
}
then your onClick would look like:
onClick={(title) => handleToggle(title)}>
This should work and is a lot easier to read aswell
You can create an array of banned/prohibited titles and use an AND operator in the onClick prop. For example:
function Component({ title, handleToggle }) {
const bannedTitles = ["Client Assigned"];
useEffect(() => {
title === "Client Assigned" ? handleToggle() : null;
}, []);
return (
<>
<div
onClick={() => !bannedTitles.includes(title) && handleToggleItem()}
/>
</>
);
}
export default Component;